[Bug]: Failed to load React Devtools #36545
Comments
sprout2000
changed the title
sprout2000
changed the title
|
Ran into this too. 4.27 switched over to manifest v3 which could be the cause, but according to facebook/react#25145 they also now use edit: yes, |
VerteDinde
added
component/devtools
status/confirmed
|
I wrote up some quick downgrade instructions for Electron apps (replace "Polypane" with your app name): https://polypane.app/docs/downgrading-react-devtools/ |
|
Closing as an upstream bug: facebook/react#25843 |
|
@codebytere Can you please reopen this? I believe Electron should add |
|
how to disable this warning? |
|
Errror is in this line 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. |
|
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) |
|
yeah |
|
I have same issue with electron 24.x |
|
@danielweck 
|
|
How to reproduce the problems I have:
% git clone https://github.com/electron/electron-quick-start.git
% cd electron-quick-start
% npm install # v26.3.0const { app, session, BrowserWindow } = require("electron");
const os = require("node:os");
const path = require("node:path");
app.whenReady().then(async () => {
const mainWindow = new BrowserWindow();
const extPath = path.join(
os.homedir(),
// Rewrite the Devtools version number accordingly
"/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.28.4_0"
// on Windows
// "/AppData/Local/Google/Chrome/User Data/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.28.4_0"
);
await session.defaultSession.loadExtension(extPath, {
allowFileAccess: true,
});
await mainWindow.loadURL("https://react.dev");
mainWindow.webContents.openDevTools();
});
app.once("window-all-closed", () => app.quit());% npm start
> electron-quick-start@1.0.0 start
> electron .
[12932:1013/112709.120:ERROR:extensions_browser_client.cc(69)] Extension Error:
OTR: false
Level: 2
Source:
Message: Error handling response: TypeError: Cannot read properties of undefined (reading 'setIcon')
at setExtensionIconAndPopup (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/background.js:1:1614)
at checkAndHandleRestrictedPageIfSo (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/background.js:1:2090)
at Array.forEach (<anonymous>)
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/background.js:1:2146
ID: fmkadmapgofadopljbjfkapdkoienihi
Type: RuntimeError
Context:
Stack Trace:
{
Line: 0
Column: 1
URL:
Function: (anonymous function)
}
[12932:1013/112710.544:ERROR:CONSOLE(2)] "Electron sandboxed_renderer.bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (2)
[12932:1013/112710.544:ERROR:CONSOLE(2)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (2)
|
|
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 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()
}) |
|
Now I'm even getting errors like:
Very frustrating that this is only getting more and more unusable even after years of struggles to get React Devtools working in Electron. Ever since the security upgrades, particularly |
|
@UndefinedOffset can you explain a little more what you mean in #36545 (comment)? The way React Devtools works is that it does not show up on pages not containing any react components, so on a bare-bones html page it wouldn't show up by design. @slapbox can you tell me a little more about what's breaking? I'm happy to look into it and have devoted some recent cycles to stabilizing it as can be seen in the above list of PRs. |
|
@codebytere Perhaps this will help it's very very basic just React's hello world demo https://github.com/webbuilders-group/electron-issue-36545. I also tried just using https://github.com/electron-react-boilerplate/electron-react-boilerplate and experienced the same thing the extension is not showing the dev tools after updating electron to 26.4.0. It seems to be an issue with the |
|
Thanks for your reply @codebytere. We just recently started getting this issue where the debugger pauses on an uncaught exception on that line. I'm guessing there was some change in React Devtools to cause this but I don't know. It seems specific to the Electron environment but it may not be an Electron issue per se. Our longer term problem has been that running the production app over a secure protocol prevents using the React Profiler with internal production builds, which is where it's intended to be used. #26812 |
|
Can't get last DevTools (v. 4.28.5) working with Electron 27.0.2 Gives no errors, |
|
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. |
|
The PR was merged 4 hours ago and the last release is 5 days old so the fix has not been released yet. |
|
@zhouzi |
|
This fix is now released with v26.6.0, v27.1.0 and v28.0.0-beta.5 (it's still not working for me but it might be related to my setup). |
|
Not working for us either. |
|
Not working here either on v27.1.0 on macos: Other extension (not React devtools) Should we do anything special to use the |
|
It seems to work fine for me with v.26.6.0
I can see the components tree and the state.
El jue, 16 nov 2023 a las 12:17, Gabin Aureche ***@***.***>)
escribió:
… This fix is now released with v26.6.0, v27.1.0 and v28.0.0-beta.5 (it's
still not working for me but it might be related to my setup).
—
Reply to this email directly, view it on GitHub
<#36545 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/APPYS6I6HXRPG67I3AMIMVTYEXY4HAVCNFSM6AAAAAASSSRWP6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMJUGI2DKOJRGE>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>
|
|
Still doesn't work on v27.1.0. What's wrong with my set up? const { app, session, BrowserWindow } = require("electron");
const path = require("node:path");
const os = require("node:os");
function createWindow() {
const mainWindow = new BrowserWindow();
mainWindow.loadURL("https://react.dev");
}
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());(node:14579) ExtensionLoadWarning: Warnings loading extension at /Users/doe/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.28.5_0:
Manifest contains a differential_fingerprint key that will be overridden on extension update. |
You forgot: But it is not working for me I cannot see react devtools tabs. |
|
@sprout2000 I think I've found a workaround. Now the extension works but I can see the next errors in console: |
|
Not able to get it working, even with the latest React Devtools... Reproduction case in most simple form in Electron Fiddle (you can load the gist in Electron Fiddle): https://gist.github.com/Bartel-C8/0330843ddf220d8bddb64183acd7bcad @codebytere : Would it be possible to re-open this issue? As it definitely does not seem resolved... |
|
@Bartel-C8 Can you try to load extension twice and load the extension before create createWindow? Also you are using |
Does not work for me (macOS) with Electron Fiddle unfortunately. Does making this change in my gist work for you? Very strange...
Same with loading |
|
Double loading worked for me. Does not give me any errors though const devToolsPath = 'D:/Users/username/AppData/Roaming/appname/extensions/fmkadmapgofadopljbjfkapdkoienihi'
const load2 = () => {
session.defaultSession.loadExtension(devToolsPath).then(
() => { createWindow() },
() => {}
)
}
const load1 = () => {
session.defaultSession.loadExtension(devToolsPath).then(
() => { load2() },
() => {}
)
}
let started = false
const start = () => {
if (started) return
started = true
load1()
}
app.whenReady().then(() => {
start()
app.on('activate', () => start())
}).catch(console.log) |
|
Got it fixed in my case, somehow the sources of my react devtools plugin provides had some issues in the manifest.json file, where "scripting" lacked under "permissions". BlackHole1/electron-devtools-vendor#35 (comment) Manually extracting the react-devtools to another location works! EDIT 5.0: It appears that the latest react-devtools (4.28.5) is NOT working with local files in Electron. By coincidence I tried 4.27.0, and that one is still working fine with local files... Not sure whether it's electron or the plugin's bug... EDIT bis: Breaks between 4.27.4 (works) and 4.27.5 (doesn't work) EDIT bis2: It DOES work with 4.28.5, but indeed, somehow I need to load it "twice", but just loading it twice in code is not enough in my case (macos). I need to "close" the application with the red cross "X" and re-click the app in the dock. This creates a new window instance. And thereafter the devtools show up. I guess it's a react (devtools) issue. So will report there! Only workaround that (programatically) let it work on "first time" (kinda hacky) |
|
Still doesn't work for me, I get the same errors, does not work with double loading as well. |
|
This is not WORKING! |
|
Do try my workaround above, or vote for the new issue: As this is a react devtools issue now, not related to electron... |
and others
Preflight Checklist
Electron Version
22.0.0
What operating system are you using?
macOS
Operating System Version
macOS Monterey 12.6
What arch are you using?
arm64 (including Apple Silicon)
Last Known Working Electron version
No response
Expected Behavior
I want to load React Devtools whose manifest version is v3.
Actual Behavior
Received an error message "Permission 'scripting' is unknown or URL pattern is malformed":
Stack Trace
Testcase Gist URL
No response
Additional Information
The problem has not occurred with Vue3 devtools, whose manifest version is v2.
The text was updated successfully, but these errors were encountered: