Electron: TypeError: BrowserWindow.addDevToolsExtension n'est pas une fonction

Merci d'avoir pris le temps de signaler ce problème et d'aider à améliorer Electron.

Veuillez fournir un test autonome qu'un testeur pourrait exécuter pour reproduire le problème. Cela facilite la résolution des problèmes: non seulement cela garantit que la bonne chose est testée, mais cela empêche également le triage de goulot d'étranglement pour obliger les testeurs à écrire de nouveaux tests pour chaque nouveau problème.

Je mets le libellé plus d'informations nécessaires pour les raisons ci-dessus. Après avoir répondu, veuillez @ moi dans un commentaire de suivi.

Merci d'avance! Votre aide est appréciée.

@MarshallOfSound
Je ne sais pas si vous avez besoin de l'extrait de code dans main.js, mais le voici

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();
})

Les extensions Devtron, React et Redux ne s'installent pas toutes dans les fenêtres du navigateur. Si quelqu'un connaît une solution de contournement, aimerait l'entendre.

[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 Nous pouvons installer les extensions react et redux dans nos applications via le package electron-devtools-installer créé par @MarshallOfSound (merci à lui 🙏) mais devtools ne se présente pas parfois avec le même type d'erreur. .

[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)

On a l'impression que les onglets d'extension sont créés après le chargement des extensions dans BrowserWindow. La seule erreur que je détecte dans le backend est liée au stockage Chrome, mais probablement pas à la cause du problème.

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

Nous ouvrons devtools sur l'événement did-frame-finish-load

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

Nous utilisons la même méthode d'installation. Il s'installe bien, mais ne fonctionnera pas. Mêmes erreurs. Même si j'ouvre les outils de développement manuellement, ce n'est donc pas un problème de synchronisation.

Nous utilisons une fenêtre d'écran de démarrage. D'après ce que je peux dire, cela fonctionne bien dans la première fenêtre créée, mais échoue pour les autres fenêtres. Quelqu'un d'autre peut-il vérifier?

Pourrait être lié à https://github.com/electron/electron/issues/23383