[Bug]: React devtools doesn't attach to devtools on launch, reload needed

[SantiagoChiappe]

Preflight Checklist

• [X] I have read the Contributing Guidelines for this project.
• [X] I agree to follow the Code of Conduct that this project adheres to.
• [X] I have searched the issue tracker for a bug report that matches the one I want to file, without success.

Electron Version

29.1.4

What operating system are you using?

Windows

Operating System Version

Windows 11 Home 23H2

What arch are you using?

x64

Last Known Working Electron version

No response

Expected Behavior

When I launch my Electron app on developer mode, React Devtools are installed and attached to my app.

Actual Behavior

React Devtools are installed, but not attached to my app. A manual reload or force reload is required to attach it. Same problem if I installed React Devtools manually from Chrome extensions, have to reload manually.

Testcase Gist URL

No response

Additional Information

My code :

// Import required modules
const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
const path = require('path');
const { app, BrowserWindow } = require('electron');

// Initialize mainWindow variable
let mainWindow;

// Function to create the main window
const createWindow = async () => {
  const isDev = await import('electron-is-dev');

  // Configure the main window
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // Enable Node.js integration
      enableRemoteModule: true, // Enable remote module
      contextIsolation: false, // Disable context isolation
      autoHideMenuBar: true, // Auto-hide menu bar
      devTools: isDev.default, // Show DevTools in development
    },
  });

  // Hide the menu bar
  mainWindow.setMenuBarVisibility(true);

  // Load the appropriate URL based on the environment
  mainWindow.loadURL(
    isDev.default
      ? 'http://localhost:3000' // Development URL
      : `file://${path.join(__dirname, '../build/index.html')}` // Production URL
  );
};

// Create the main window when the app is ready
app.whenReady().then(() => {
  installExtension(REACT_DEVELOPER_TOOLS,  { loadExtensionOptions: { allowFileAccess: true }})
      .then((name) => {
        console.log(`Added Extension: ${name}`);
        // Create the window and the React application
        createWindow();
      })
      .catch((err) => console.log('An error occurred: ', err));
});

// Quit the app when all windows are closed (except on macOS)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// Create a new window when the app is activated (macOS)
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

I tried also reloading the window on my code or adding a timer to reload the window but without success.

[erikian]

@SantiagoChiappe are you getting an error similar to this (reported in https://github.com/electron/electron/issues/37876#issuecomment-1984873828) in your main process?

[91044:0308/100700.690484:ERROR:CONSOLE(2)] "Electron sandboxed_renderer.bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (2)
[91044:0308/100700.690537:ERROR:CONSOLE(2)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (2)

[SantiagoChiappe]

@SantiagoChiappe are you getting an error similar to this (reported in #37876 (comment)) in your main process?

[91044:0308/100700.690484:ERROR:CONSOLE(2)] "Electron sandboxed_renderer.bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (2)
[91044:0308/100700.690537:ERROR:CONSOLE(2)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (2)

Yes I do, only when opening devtools. I also got other errors when I reload the app using View -> Reload, but then react devtools appear as I mentioned previously :

[1] [73616:0410/004950.275:ERROR:CONSOLE(1)] "uniqueContextId not found", source: devtools://devtools/bundled/core/sdk/sdk.js (1)
[1] [73616:0410/004950.275:ERROR:CONSOLE(1)] "Extension server error: Inspector protocol error: uniqueContextId not found", source: devtools://devtools/bundled/models/extensions/extensions.js (1)
[1] [73616:0410/004950.278:ERROR:CONSOLE(1)] "Received error with code E_PROTOCOLERROR while checking if react has loaded: "Inspector protocol error: %s"", source: chrome-extension://deachpobkibmlfmamelbofgimdagiiob/build/main.js (1)```

[louispelarrey]

Got the same issue

[Jurin]

Exact same issue but with Vue devtools with the exception that it will not load even after reloading. Same error when trying to open devtools.

[24844:0422/101748.810:ERROR:CONSOLE(1)] "Request Autofill.enable failed. {"code":-32601,"message":"'Autofill.enable' wa
sn't found"}", source: devtools://devtools/bundled/core/protocol_client/protocol_client.js (1)
[24844:0422/101748.903:ERROR:CONSOLE(2)] "Electron renderer.bundle.js script failed to run", source: node:electron/js2c/
renderer_init (2)
[24844:0422/101748.903:ERROR:CONSOLE(2)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.ite
rator))", source: node:electron/js2c/renderer_init (2)

[khanayaan98]

Any update on this? how to resolve the issue?

[alexk111]

Resolved this by using the react-devtools package instead of installing the chrome extension.

1. Exec yarn add --dev react-devtools
2. Add "dev:react-devtools": "react-devtools" or something like that to the scripts in the package.json
3. Add <script src="http://localhost:8097"></script> to the dev version of your renderer index html file
4. Now when you exec yarn run dev:react-devtools it will launch the react-devtools server and make the react devtools available in the app window devtools.

[lanshenghai]

Resolved this by using the react-devtools package instead of installing the chrome extension.

1. Exec yarn add --dev react-devtools
2. Add "dev:react-devtools": "react-devtools" or something like that to the scripts in the package.json
3. Add <script src="http://localhost:8097"></script> to the dev version of your renderer index html file
4. Now when you exec yarn run dev:react-devtools it will launch the react-devtools server and make the react devtools available in the app window devtools.

It's workable on my project. Thanks.

[nikwen]

@codebytere You told me you weren't able to reproduce this. Here's an example repo (using the Webpack dev server) where it works reliably for me: https://github.com/nikwen/electron-devtools-bug-repro

Steps to reproduce:

1. npm start
2. Open the devtools
3. The React devtools aren't visible
4. Reload the page
5. The React devtools become visible

Here's a video showing the reproduction: https://www.loom.com/share/a1e68289b4594559b01e104c4173f0d0

IIRC this used to work on Electron v28 and broke in Electron v29.

[codebytere]

After a bit of suffering and building like 20 different devtools versions, i've determined that https://github.com/facebook/react/commit/f7181993133a89b54f93d79d199be3392e5af6fc broke it on initial load. Not sure quite why yet, but there's a good lead now.

[Letrab]

After a bit of suffering and building like 20 different devtools versions, i've determined that facebook/react@f718199 broke it on initial load. Not sure quite why yet, but there's a good lead now.

It is a very problematic commit for electron, there is a long outstanding issue loading local file urls since that commit as well:

https://github.com/facebook/react/issues/27749