React dev tools fail to work

[NyakoFox]

Prerequisites

• [x] Using npm
• [x] Using an up-to-date main branch
• [x] Using latest version of devtools. Check the docs for how to update
• [x] Tried solutions mentioned in #400
• [ ] For issue in production release, add devtools output of DEBUG_PROD=true npm run build && npm start

Expected Behavior

React dev tools should work properly

Current Behavior

Loading React Element Tree...

If this seems stuck, please follow the [troubleshooting instructions](https://github.com/facebook/react/tree/main/packages/react-devtools#the-issue-with-chrome-v101-and-earlier-versions).

Steps to Reproduce

Here's some unusual output (I think):

(node:25612) ExtensionLoadWarning: Warnings loading extension at C:\Users\Ally\AppData\Roaming\Electron\extensions\fmkadmapgofadopljbjfkapdkoienihi:
  Permission 'scripting' is unknown or URL pattern is malformed.

(Use `electron --trace-warnings ...` to show where the warning was created)
00:04:03.843 > Skip checkForUpdatesAndNotify because application is not packed
00:04:03.888 > checkForUpdatesAndNotify called, downloadPromise is null
[25612:0213/000404.287:ERROR:extensions_browser_client.cc(61)] Extension Error:
  OTR:     false
  Level:   2
  Source:  chrome-extension://lifekjadeemmahelfgcjicjflaipongp/build/background.js
  Message: Uncaught TypeError: Cannot read properties of undefined (reading 'registerContentScripts')
  ID:      lifekjadeemmahelfgcjicjflaipongp
  Type:    RuntimeError
  Context: chrome-extension://lifekjadeemmahelfgcjicjflaipongp/build/background.js
  Stack Trace:
    {
      Line:     107
      Column:   1
      URL:      chrome-extension://lifekjadeemmahelfgcjicjflaipongp/build/background.js
      Function: (anonymous function)
    }
[25612:0213/000404.292:ERROR:extensions_browser_client.cc(61)] Extension Error:
  OTR:     false
  Level:   1
  Source:  manifest.json
  Message: Service worker registration failed
  ID:      lifekjadeemmahelfgcjicjflaipongp
  Type:    ManifestError
IPC test: ping
[25612:0213/000405.500:ERROR:CONSOLE(160)] "Electron sandbox_bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (160)
[25612:0213/000405.501:ERROR:CONSOLE(160)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (160)

Additionally, clicking on the Components tab after startup repeats the last couple lines:

[25612:0213/000536.210:ERROR:CONSOLE(160)] "Electron sandbox_bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (160)
[25612:0213/000536.210:ERROR:CONSOLE(160)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (160)

Possible Solution (Not obligatory)

Context

I've made a few changes to the boilerplate, however I think it happens with a fresh clone as well. I'm just trying to use the Components tab in dev tools, but it fails to load.

Your Environment

• Node version : v17.4.0
• electron-react-boilerplate version or branch : main
• Operating System and version : Windows 11 22H2 (Build 25290.1010)
• Link to your project :

[karmaral]

Currently Electron doesn't yet support extensions with Manifest v3. There's a link to the issue in the React repo in #3407. They recommend downloading a v2 version of it.

[xupea]

@NyakoFox try this repo: https://github.com/xupea/electron-devtools-installer, which may ease your pain

[eltaurito]

@NyakoFox try this repo: https://github.com/xupea/electron-devtools-installer, which may ease your pain

Hi @xupea! Thank you for your answer! I tried to install your package, I give you my feedback here

[geek4teck]

@NyakoFox try this repo: https://github.com/xupea/electron-devtools-installer, which may ease your pain

Got it working!! Here is the code for main.ts

Replace whenReady with the following

Add this to the header

Don't miss to install

npm i --save electron-extension-installer