Electron: TypeError: BrowserWindow.addDevToolsExtension não é uma função

Obrigado por dedicar seu tempo para relatar este problema e ajudar a tornar o Electron melhor.

Forneça um teste autônomo que um testador possa executar para reproduzir o problema. Isso faz com que a correção de problemas seja mais fácil: não apenas garante que a coisa certa seja testada, mas também evita que a triagem afunde ao fazer os testadores escreverem novos testes para cada novo problema.

Estou definindo o rótulo de mais informações necessárias pelos motivos acima. Depois de responder, envie um @ me em um comentário de acompanhamento.

Desde já, obrigado! Agradecemos sua ajuda.

@MarshallOfSound
Não sei se você precisa do snippet em main.js, mas aqui está

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const url = require('url');
const scraper = require('./scraper.js');
const helpers = require('./electron/helpers.js');
const windowStateKeeper = require('electron-window-state');
const { autoUpdater } = require("electron-updater");

require('v8-compile-cache');
// for nodemon
process.env.IS_DEV ? require('electron-reload') : null;
// disable security warning
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';

// Application already running, so we close now
if (!app.requestSingleInstanceLock()) {
  app.quit()
}

app.removeAllListeners('ready');

let mainWindow
function createWindow() {
  // check for uppdate
  autoUpdater.checkForUpdatesAndNotify();

  // Load the previous state with fallback to defaults
  let mainWindowState = windowStateKeeper({
    defaultWidth: 1100,
    defaultHeight: 600
  });
  mainWindow = new BrowserWindow({
    'x': mainWindowState.x,
    'y': mainWindowState.y,
    'width': mainWindowState.width,
    'height': mainWindowState.height,
    minWidth: 1100,
    minHeight: 500,
    backgroundColor: '#121212',
    frame: false,
    icon: __dirname + '../build/icon.png',
    webPreferences: {
      webSecurity: false,
      nodeIntegration: true,
      webviewTag: true
    },
  });
  // Let us register listeners on the window, so we can update the state
  // automatically (the listeners will be removed when the window is closed)
  // and restore the maximized or full screen state
  mainWindowState.manage(mainWindow);

  // http://localhost:3000
  const startUrl = process.env.ELECTRON_START_URL || url.format({
    pathname: path.join(__dirname, '../build/index.html'),
    protocol: 'file:',
    slashes: true,
  });

  mainWindow.loadURL(startUrl);
  // in dev mode
  if (process.env.ELECTRON_START_URL) {
    // open devTools
    mainWindow.webContents.openDevTools({ mode: 'undocked' });
  }
  // in build mode
  if (process.env.IS_DEV) {
    // close menubar
    mainWindow.setMenuBarVisibility(false);
  }

  //clear session + cookies on start to avoid blocking requests
  mainWindow.on('closed', () => {
    mainWindow = null
  });

  mainWindow.webContents.on('new-window', function (e, url) {
    e.preventDefault();
  })

  // Add React Devtool
  if (app.isReady() && process.env.ELECTRON_START_URL) {
    console.log('___INSTALL React Devtool_____')
    BrowserWindow.addDevToolsExtension("./extensions/react")
      .then(name => console.log('INSTALLING', name))
      .catch(err => console.log('Install React-Devtool err', err));
  }
}
app.setAppUserModelId('com.MyMovies.app');
app.on('ready', createWindow);
app.on('window-all-closed', () => {
  app.quit();
})

As extensões Devtron, React e Redux falham na instalação nas janelas do navegador. Se alguém souber de uma solução alternativa, adoraria ouvir.

[electron] Added Extension: React Developer Tools
[electron] Added Extension: Redux DevTools
[electron] [41948:0228/141801.424392:ERROR:CONSOLE(1)] "Uncaught TypeError: Cannot read[electron] [41948:0228/141801.424392:ERROR:CONSOLE(1)] "Uncaught TypeError: Cannot read property 'panels' of undefined", source: chrome-extension://redux-devtools/js/devtools.bundle.js (1)
[electron] [41948:0228/141801.512131:ERROR:CONSOLE(40)] "Uncaught TypeError: Cannot read property 'inspectedWindow' of undefined", source: chrome-extension://react-developer-tools/build/main.js (40)
[electron] Unable to create basic Accelerated OpenGL renderer.
[electron] Unable to create basic Accelerated OpenGL renderer.
[electron] Core Image is now using the software OpenGL renderer. This will be slow.

@stevenroussey-privicy Somos capazes de instalar extensões react e redux em nossos aplicativos através do pacote electron-devtools-installer feito por @MarshallOfSound (graças a ele 🙏) mas devtools simplesmente não aparecem às vezes com o mesmo tipo de erro. .

[35280:0324/122320.140:ERROR:CONSOLE(1)] "Uncaught TypeError: Cannot read property 'panels' of undefined", source: chrome-extension://redux-devtools/js/devtools.bundle.js (1)
[35280:0324/122320.233:ERROR:CONSOLE(40)] "Uncaught TypeError: Cannot read property 'inspectedWindow' of undefined", source: chrome-extension://react-developer-tools/build/main.js (40)

Parece que as guias de extensão são criadas depois que as extensões são carregadas no BrowserWindow. O único erro que estou detectando no back-end está relacionado ao armazenamento do Chrome, mas provavelmente não é a causa do problema.

Exception has occurred: Error
Error: ENOENT: no such file or directory, open "\AppData\Roaming\AppName\Chrome Storage\redux-devtools-sync.json"

Estamos abrindo devtools no evento did-frame-finish-load

win.webContents.on('did-frame-finish-load', () => {
  win.webContents.openDevTools();
});

Usamos o mesmo método de instalação. Ele instala bem, mas não funciona. Mesmos erros. Mesmo se eu abrir o devtools manualmente, não é um problema de tempo aí.

Usamos uma janela de tela inicial. Pelo que posso dizer, funciona bem na primeira janela criada, mas falha nas outras janelas. Alguém mais pode verificar?

Pode estar relacionado a https://github.com/electron/electron/issues/23383