electron: [Bug]: Failed to load React Devtools

@codebytere Can you please reopen this? I believe Electron should add chrome.scripting APIs (as well as other Manifest V3 support) to fix this issue. Here’s my argument https://github.com/facebook/react/issues/25843#issuecomment-1406766561

I have same issue with electron 24.x

I wrote up some quick downgrade instructions for Electron apps (replace “Polypane” with your app name): https://polypane.app/docs/downgrading-react-devtools/

I also encountered this issue in Electron 24.x.

Does this mean that React developers on Electron have been unable to use development tools for half a year?

The PR was merged 4 hours ago and the last release is 5 days old so the fix has not been released yet.

Please fix this soon so we dont have to workaround with scripts and downgrade!

Yes, to use React Devtools, you should downgrade its version.

how?

Here’s a script that might help: https://github.com/facebook/react/issues/25843#issuecomment-1368733054

Replace /path/to/your/data/extensions with either %AppData%/<YourApp>/extensions (for Windows) or ~/Library/Application Support/<YourApp>/extensions (for macOS).

Alternatively, if you prefer not to run the script, you can manually download https://polypane.app/fmkadmapgofadopljbjfkapdkoienihi.zip and replace the fmkadmapgofadopljbjfkapdkoienihi folder.

Still same with Electron v24.x.

[26821:0415/145134.612606:ERROR:extensions_browser_client.cc(67)] Extension Error:
  OTR:     false
  Level:   2
  Source:  chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/background.js
  Message: Uncaught TypeError: Cannot read properties of undefined (reading 'registerContentScripts')
  ID:      fmkadmapgofadopljbjfkapdkoienihi
  Type:    RuntimeError
  Context: chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/background.js
  Stack Trace: 
    {
      Line:     107
      Column:   1
      URL:      chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/background.js
      Function: (anonymous function)
    }
[26821:0415/145134.612901:ERROR:extensions_browser_client.cc(67)] Extension Error:
  OTR:     false
  Level:   1
  Source:  manifest.json
  Message: Service worker registration failed. Status code: 15
  ID:      fmkadmapgofadopljbjfkapdkoienihi
  Type:    ManifestError
[26821:0415/145134.981682:ERROR:CONSOLE(1)] "Uncaught (in promise) TypeError: Failed to fetch", source: devtools://devtools/bundled/panels/elements/elements.js (1)
[26821:0415/145135.087366:ERROR:CONSOLE(2)] "Electron sandboxed_renderer.bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (2)
[26821:0415/145135.087392:ERROR:CONSOLE(2)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (2)

Closing as an upstream bug: https://github.com/facebook/react/issues/25843

Ran into this too. 4.27 switched over to manifest v3 which could be the cause, but according to https://github.com/facebook/react/pull/25145 they also now use chrome.scripting.registerContentScripts which is an API electron might not support yet.

edit: yes, chrome.scripting isn’t implemented: https://github.com/MarshallOfSound/electron-devtools-installer/issues/232

yeah the latest version electron also have same error

This is not WORKING!

Still doesn’t work for me, I get the same errors, does not work with double loading as well.

Could you please reopen this issue? The problem still remains.

The following is a reproduced code based on electron-quick-start:

const { app, BrowserWindow, session } = require("electron");
const os = require("node:os");
const path = require("node:path");

function createWindow() {
  const mainWindow = new BrowserWindow();

  mainWindow.loadURL("https://react.dev");
  mainWindow.webContents.openDevTools();
}

const reactDevtoolsPath = path.join(
  os.homedir(),
  "/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.28.5_0"
);

app.whenReady().then(async () => {
  createWindow();
  await session.defaultSession.loadExtension(reactDevtoolsPath);
});

app.once("window-all-closed", () => app.quit());

I wonder if anyone else could run the above code as is and still have React Devtools load correctly.

It seems based on my testing using the default Electron Fiddle (adding in a simple react app) on 25.9.0, 26.3.0 and 27.0.0 the latest React Dev Tools will not load when using mainWindow.loadFile() even if you have allowFileAccess: true unless you are using a url like https://react.dev as has been used in examples above.

const { app, BrowserWindow, session } = require('electron')
const path = require('path')

async function createWindow () {
  const extPath = "{extension path}";
  await session.defaultSession.loadExtension(extPath, {
    allowFileAccess: true,
  });
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadFile('index.html')

  mainWindow.webContents.openDevTools()
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

From v26.3.0 on macOS Sonoma 14 on my machine, just now, with code identical to above:

I’ll check to make sure my version of devtools is latest tho and will update.

Edit: Still works and shows up with 4.28.4 (10/3/2023)

@codebytere Hmmm, I tried your code (minus the version number) and it was still the same.

const { app, BrowserWindow, session } = require("electron");
const path = require("node:path");
const { homedir } = require("node:os");

app.whenReady().then(async () => {
  await session.defaultSession.loadExtension(
    path.join(
      homedir(),
      "Desktop",
      "fmkadmapgofadopljbjfkapdkoienihi",
      "4.28.4_0"
    ),
    { allowFileAccess: true }
  );

  const w = new BrowserWindow();
  await w.loadURL("https://react.dev");
  w.webContents.toggleDevTools();
});

• Electron v26.3.0
• macOS Sonoma 14

% npm start                      

> electron-quick-start@1.0.0 start
> electron .

2023-10-07 09:04:14.036 Electron[73035:1507359] WARNING: Secure coding is not enabled for restorable state! Enable secure coding by implementing NSApplicationDelegate.applicationSupportsSecureRestorableState: and returning YES.
[73035:1007/090414.719562:ERROR:CONSOLE(2)] "Electron sandboxed_renderer.bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (2)
[73035:1007/090414.719592:ERROR:CONSOLE(2)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (2)

Versions node:18.16.1 acorn:8.8.2 ada:1.0.4 ares:1.19.1 brotli:1.0.9 cldr:43.0 icu:73.1 llhttp:6.0.11 modules:116 napi:8 nghttp2:1.52.0 openssl:1.1.1 simdutf:3.2.2 tz:2023c undici:5.21.0 unicode:15.0 uv:1.44.2 uvwasi:0.0.15 v8:11.6.189.20-electron.0 zlib:1.2.13.1-motley electron:26.2.4 chrome:116.0.5845.190

React Devtools 4.28.0_0

[2137:1001/130308.425155:ERROR:extensions_browser_client.cc(69)] Extension Error: OTR: false Level: 2 Source: chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/background.js Message: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘ExecutionWorld’) ID: fmkadmapgofadopljbjfkapdkoienihi Type: RuntimeError Context: chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/background.js Stack Trace: { Line: 59 Column: 1 URL: chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/background.js Function: (anonymous function) }

i am getting the same error

A lot longer than that in production builds if you’re following good security practices; which are where it’s recommended to use tools like React’s Profiling. I haven’t had access to profiling in YEARS and can’t even imagine how much low-hanging fruit I have overlooked as a result.

Because I experience the same issue and more others with electrons and have a plan to abandon Electron in favor of Tauri, your reply triggered me to check out does Tauri has it. I found out that Tauri does not have it, and a workaround to use standalone React DevTool. I checked it out quickly, and it works without issues with the Electron.

Does this mean that React developers on Electron have been unable to use development tools for half a year?

A lot longer than that in production builds if you’re following good security practices; which are where it’s recommended to use tools like React’s Profiling. I haven’t had access to profiling in YEARS and can’t even imagine how much low-hanging fruit I have overlooked as a result.

Yes, to use React Devtools, you should downgrade its version.

Errror is in this line $HOME/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.27.0_0.

The warning specifically mentions that the permission “scripting” is unknown or the URL pattern is malformed. This could indicate that the extension is using a deprecated or outdated permission, or that the URL patterns specified in the extension manifest are incorrect.

To address this issue, you could try disabling or removing the extension causing the warning and see if the problem persists. Alternatively, you could contact the developer of the extension for further assistance in resolving the issue.