javascript - ElectronJS & React DevTools: "Extension server error: Operation failed: http:localhost:3000 has no

admin管理员组

文章数量:1415697

My React + Electron.js app is using 2 DevTools extensions (React Developer Tools & Redux DevTools) installed using the electron-devtools-installer package when the app is started in a development environment. Parcel 1.X is used to bundle the app and to provide hot reloading.

On the first run using yarn start, no errors occur, with the following output seen on running the app:

(node:60573) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 bundled listeners added to [Bundler]. Use emitter.setMaxListeners() to increase limit
[0] (Use `node --trace-warnings ...` to show where the warning was created)
[0] ✨  Built in 6.67s.
[1] (electron) The default value of app.allowRendererProcessReuse is deprecated, it is currently "false".  It will change to be "true" in Electron 9.  For more information please check 
[1] Added Extension:  React Developer Tools
[1] Added Extension:  Redux DevTools

If we go to the Components tab in Chrome DevTools, we see React Developer Tools working as expected.

However, after the app hot-reloads on detecting a code change, we start to see the errors:

[1] [60597:0519/005808.141307:ERROR:CONSOLE(131)] "Extension server error: Operation failed: http://localhost:3000/ has no execution context", source: devtools://devtools/bundled/extensions/ExtensionServer.js (131)
[1] [60597:0519/005808.142973:ERROR:CONSOLE(131)] "Extension server error: Operation failed: http://localhost:3000/ has no execution context", source: devtools://devtools/bundled/extensions/ExtensionServer.js (131)
[1] [60597:0519/005808.143059:ERROR:CONSOLE(131)] "Extension server error: Operation failed: http://localhost:3000/ has no execution context", source: devtools://devtools/bundled/extensions/ExtensionServer.js (131)
[1] [60597:0519/005808.146899:ERROR:CONSOLE(40)] "[object Object]", source: chrome-extension://react-developer-tools/build/main.js (40)

If we go to the Components tab in Chrome DevTools, we now observe an empty screen.

Question: What might be causing the error here?

---

• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• Node v14.2.0
• Mac OS X Catalina 10.15.3

electron.js

const electron = require("electron");
const app = electron.app;

const BrowserWindow = electron.BrowserWindow;

const path = require("path");
const isDev = require("electron-is-dev");


let mainWindow;

const installExtensions = async () => {
  const { default: installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = require('electron-devtools-installer');

  const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS];
  for (const extension of extensions) {
    try {
      const name = await installExtension(extension);
      console.log(`Added Extension:  ${name}`);
    } catch (e) {
      console.log('An error occurred: ', err);
    }
  }
}

function createWindow() {
  const { width, height } = electron.screen.getPrimaryDisplay().workAreaSize;
  mainWindow = new BrowserWindow({
    width: Math.round(width),
    height: Math.round(heigh),
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      preload: __dirname + '/preload.js'
    }
  });

  mainWindow.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );
  mainWindow.on("closed", () => (mainWindow = null));
}

app.on("ready", async () => {
  createWindow();

  if (isDev) {
    // Install extensions
    await installExtensions();

    // Auto-open dev tools
    mainWindow.webContents.on("did-frame-finish-load", () => {
      mainWindow.webContents.once("devtools-opened", () => {
        mainWindow.focus();
      });
      mainWindow.webContents.openDevTools({
        mode: 'undocked'
      });
    });
  }
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (mainWindow === null) {
    createWindow();
  }
});

My React + Electron.js app is using 2 DevTools extensions (React Developer Tools & Redux DevTools) installed using the electron-devtools-installer package when the app is started in a development environment. Parcel 1.X is used to bundle the app and to provide hot reloading.

On the first run using yarn start, no errors occur, with the following output seen on running the app:

(node:60573) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 bundled listeners added to [Bundler]. Use emitter.setMaxListeners() to increase limit
[0] (Use `node --trace-warnings ...` to show where the warning was created)
[0] ✨  Built in 6.67s.
[1] (electron) The default value of app.allowRendererProcessReuse is deprecated, it is currently "false".  It will change to be "true" in Electron 9.  For more information please check https://github./electron/electron/issues/18397
[1] Added Extension:  React Developer Tools
[1] Added Extension:  Redux DevTools

If we go to the Components tab in Chrome DevTools, we see React Developer Tools working as expected.

However, after the app hot-reloads on detecting a code change, we start to see the errors:

[1] [60597:0519/005808.141307:ERROR:CONSOLE(131)] "Extension server error: Operation failed: http://localhost:3000/ has no execution context", source: devtools://devtools/bundled/extensions/ExtensionServer.js (131)
[1] [60597:0519/005808.142973:ERROR:CONSOLE(131)] "Extension server error: Operation failed: http://localhost:3000/ has no execution context", source: devtools://devtools/bundled/extensions/ExtensionServer.js (131)
[1] [60597:0519/005808.143059:ERROR:CONSOLE(131)] "Extension server error: Operation failed: http://localhost:3000/ has no execution context", source: devtools://devtools/bundled/extensions/ExtensionServer.js (131)
[1] [60597:0519/005808.146899:ERROR:CONSOLE(40)] "[object Object]", source: chrome-extension://react-developer-tools/build/main.js (40)

If we go to the Components tab in Chrome DevTools, we now observe an empty screen.

Question: What might be causing the error here?

---

• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• Node v14.2.0
• Mac OS X Catalina 10.15.3

electron.js

const electron = require("electron");
const app = electron.app;

const BrowserWindow = electron.BrowserWindow;

const path = require("path");
const isDev = require("electron-is-dev");


let mainWindow;

const installExtensions = async () => {
  const { default: installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = require('electron-devtools-installer');

  const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS];
  for (const extension of extensions) {
    try {
      const name = await installExtension(extension);
      console.log(`Added Extension:  ${name}`);
    } catch (e) {
      console.log('An error occurred: ', err);
    }
  }
}

function createWindow() {
  const { width, height } = electron.screen.getPrimaryDisplay().workAreaSize;
  mainWindow = new BrowserWindow({
    width: Math.round(width),
    height: Math.round(heigh),
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      preload: __dirname + '/preload.js'
    }
  });

  mainWindow.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );
  mainWindow.on("closed", () => (mainWindow = null));
}

app.on("ready", async () => {
  createWindow();

  if (isDev) {
    // Install extensions
    await installExtensions();

    // Auto-open dev tools
    mainWindow.webContents.on("did-frame-finish-load", () => {
      mainWindow.webContents.once("devtools-opened", () => {
        mainWindow.focus();
      });
      mainWindow.webContents.openDevTools({
        mode: 'undocked'
      });
    });
  }
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (mainWindow === null) {
    createWindow();
  }
});

• javascript
• node.js
• reactjs
• electron
• parceljs

Share Improve this question Follow edited May 19, 2020 at 5:08 Nyxynyx asked May 19, 2020 at 5:03 NyxynyxNyxynyx 63.9k163163 gold badges507507 silver badges856856 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

if any one getting the same problem and there is another issue like when you run the app for the first time it's showing a blank screen without the page just with main ponent to fix that just Change your BrowserRouter with a HashRouter. and i got this both problems but after changing this it's fixed

I had to deal with the same issue and I couldn't find a way for a long time.

What solved for me the issue, I added a callback function for did-frame-finish-load. So in my case it looks like this:

app.on('ready', () => {
  const mainWindow = createMainWindow(__dirname);

  mainWindow.webContents.on("did-frame-finish-load", async () => {
    if (process.env.NODE_ENV === 'development') {
      await installExtensions();
    }
  });
  // Receiver(ipcMain) Module
  receiver();

  // Updater Module
  updater(mainWindow);
});

installExetensions.js

async function installExtensions() {
  const installer = require('electron-devtools-installer');
  const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
  const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS'];

  return Promise.all(
    extensions.map(name => installer.default(installer[name], forceDownload))
  ).catch(err => console.log(err));
}

export { installExtensions };

I think this solution can work in your scenario as well.

本文标签：