React Dev Tools not connecting to React instance running in Electron

Question

I've got a new Electron Forge project which uses:

• React (17.0.2)
• React Dev Tools (4.27.2-1a88fbb67)
• React-Redux (7.2.9)
• Electron (23.1.1)
• electron-devtools-installer (3.2.0)
• @electron-forge/cli (6.0.5)

Despite the React Developer Tools being installed properly into my Electron userPath by the Electron main process, it doesn't seem to be able to connect to the React instance being set up in the renderer process of Electron.

// main.js
const { app, session, BrowserWindow } = require('electron')
import {
  enable as enableElectronRemote,
  initialize as initializeElectronRemote,
} from '@electron/remote/main'
import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from 'electron-devtools-installer'

const addDevTools = async () => {
  await installExtension(REACT_DEVELOPER_TOOLS, { loadExtensionOptions: { allowFileAccess: true }})
      .then((name) => console.log(`Added Extension:  ${name}`))
      .catch((err) => console.log('An error occurred: ', err));

  await installExtension(REDUX_DEVTOOLS)
      .then((name) => console.log(`Added Extension:  ${name}`))
      .catch((err) => console.log('An error occurred: ', err));
}

// Create the browser window.
const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
    nodeIntegration: true,
    contextIsolation: false,
  },
});

enableElectronRemote(mainWindow.webContents);

// and load the index.html of the app.
mainWindow.loadURL(`${MAIN_WINDOW_WEBPACK_ENTRY}`);

addDevTools()
  .then(() => {
    if (process.env.NODE_ENV === 'development') {
      // Open the DevTools.
      mainWindow.webContents.on('did-frame-finish-load', () => {
        mainWindow.webContents.openDevTools();
      })
    }
  })

The Redux dev tools connect to the Redux instance and state perfectly fine, yet the React Developer Tools only ever shows this message:

Loading React Element Tree...
If this seems stuck, please follow the troubleshooting instructions.

The console output of my Electron boot shows that the React Dev Tools is added fine:

Added Extension:  React Developer Tools
(node:312) ExtensionLoadWarning: Warnings loading extension at /home/jack/.config/electron/extensions/lmhkpmbekcpmknklioeibfkpmmfibljd:
  Manifest version 2 is deprecated, and support will be removed in 2023. See https://developer.chrome.com/blog/mv2-transition/ for more details.
  Permission 'notifications' is unknown or URL pattern is malformed.
  Permission 'contextMenus' is unknown or URL pattern is malformed.

The <div id="root"> is set fine in the document, but it just seems that the React Dev Tools don't seem to able to find this. I've looked through the Electron, Electron Forge and React issues and can't find anything that seems to have this issue.

I have a web version of this application which works just fine with the React Dev Tools, so I'm convinced that this is an issue with the Electron and React side of things.

I've tried to manually import the React Dev Tools rather than use electron-devtools-installer, which resulted in the same issue as above.

The React Developer Tools should load up and show all of the component tree as it usually does in a web browser. However, it just renders the error message Loading React Element Tree... and never shows an error message of any kind.

Answer 1

Update:

Should be fixed with Electron v27.0.0+ (and also v25.9.0 and v26.3.0) with this pull request.

---

Original answer:

It's actually a problem of compatibility, the current version of React Developer Tools (4.27) uses an API that is not supported by Electron. You need to downgrade your version of the devtools to 4.25.

Here is the related issue on GitHub, you can use one of the solutions provided in the comments.