ElectronJS & React DevTools: "Extension server error: Operation failed: http://localhost:3000/ has no execution context", source: devtools://

user_741099 0
Viewed 4327

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.com/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.

enter image description here

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.

enter image description here

Question: What might be causing the error here?

  • electron@8.3.0
  • electron-devtools-installer@3.0.0
  • react@16.13.1
  • redux@4.0.5
  • parcel-bundler@1.12.4
  • 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();
  }
});
parceljs electron reactjs node.js javascript
2 Answers

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 component to fix that just Change your BrowserRouter with a HashRouter. and i got this both problems but after changing this it's fixed

user_48175570

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.

user_26596960
Related