Electron: TypeError: BrowserWindow.addDevToolsExtension no es una función

Gracias por tomarse el tiempo para informar este problema y ayudar a mejorar Electron.

Proporcione una prueba independiente que un evaluador pueda ejecutar para reproducir el problema. Esto hace que la solución de problemas sea más sencilla: no solo garantiza que se pruebe lo correcto, sino que también evita que el triaje se atasque al hacer que los evaluadores escriban nuevas pruebas para cada nuevo problema.

Estoy configurando la etiqueta de más información necesaria por las razones anteriores. Una vez que haya respondido, envíeme un mensaje de seguimiento.

¡Gracias por adelantado! Tu ayuda es apreciada.

@MarshallOfSound
No sé si necesita el fragmento en main.js, pero aquí 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();
})

Las extensiones Devtron, React y Redux no se instalan en las ventanas del navegador. Si alguien conoce una solución alternativa, me encantaría escucharla.

[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 Podemos instalar extensiones react y redux en nuestras aplicaciones a través del paquete electron-devtools-installer creado por @MarshallOfSound (gracias a él 🙏) pero devtools simplemente no aparece a veces con el mismo tipo de error. .

[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 las pestañas de extensión se crean después de cargar las extensiones en BrowserWindow. El único error que estoy detectando en el backend está relacionado con el almacenamiento de Chrome, pero probablemente no sea la causa del problema.

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

Abriremos devtools en el evento did-frame-finish-load

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

Usamos el mismo método de instalación. Se instala bien, pero no se ejecuta. Mismos errores. Incluso si abro las herramientas de desarrollo manualmente, no es un problema de tiempo allí.

Usamos una ventana de pantalla de bienvenida. Por lo que puedo decir, funciona bien en la primera ventana creada, pero falla en otras ventanas. ¿Alguien más puede verificar?

Podría estar relacionado con https://github.com/electron/electron/issues/23383