React Developer Tools not appearing

[andrewschreiber]

Prerequisites

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

Expected Behavior

React Dev tools appear in the Dev tools window like such:

Current Behavior

React dev tools do not appear.

An error is thrown: (node:39620) ExtensionLoadWarning: Warnings loading extension at /Users/andrewschreiber/Library/Application Support/Electron/extensions/fmkadmapgofadopljbjfkapdkoienihi: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'minimum_chrome_version'. Unrecognized manifest key 'update_url'. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.

Attempted solutions:

• Fixing the above issue by deleting the metadata folder and the unrecognized keys.
• Reinstalling electron-devtools-installer
• Adding types yarn add -D @types/electron-devtools-installer
• Using the standard electron approach (without electron-devtools-installer) here https://www.electronjs.org/docs/tutorial/devtools-extension
• Updating to latest React Developer Tools version (14.10.1)

Steps to Reproduce

1. Clone repo. Run yarn && yarn start

2. Notice error log and absence of React Developer Tools

Possible Solution (Not obligatory)

Unknown, but this poster on reddit seems to have the same issue. https://www.reddit.com/r/electronjs/comments/kv0xv0/how_can_i_use_react_devtools_extension_in_my/

Context

No changes were made to the boilerplate.

Your Environment

• Node version : v14.10.1
• electron-react-boilerplate version or branch : Master ( commit fb29200 from Dec 18th)
• Operating System and version : MacOS Catalina 10.15.7

[TomTomB]

This should be fixed once electron PR #25198 is merged. Until thats the case, you need to close and reopen the devtools everytime you start erb.

[hadnet]

Closing and reopen devtools does not work either.

[DoWhileGeek]

@hadnet I'm seeing the same thing, with react or redux dev tools.

[jedhelmers]

Also seeing this error

[TomTomB]

@hadnet I'm seeing the same thing, with react or redux dev tools.

For Redux DevTools you can use the Remote Redux DevTools package. Sadly, I dont think there is a corresponding package for React DevTools.

Another temp solution would be to downgrade Electron to version 8.x

[jedhelmers]

I toggled OFF Redux Dev Tools and that seemed to fix my problem. Thanks!

…

On Jan 19, 2021, at 3:17 AM, Tom-Rune Bornholdt ***@***.***> wrote: @hadnet <https://github.com/hadnet> I'm seeing the same thing, with react or redux dev tools. For Redux DevTools you can use the Remote Redux DevTools package <https://github.com/zalmoxisus/remote-redux-devtools>. Sadly, I dont think there is a corresponding package for React DevTools. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2725 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AH63T6QQ3UWQFF6N7B5IECDS2U5ZHANCNFSM4V6JS3JQ>.

[mulgurul]

Same here, closing and reopening dev tool does not work. Quite annoying... Seems like this is a very important fix for a REACT electron boilerplate?

[RoderickJDunn]

I was able to get both React & Redux Devtools to show reliably by following the steps on this comment on electron-devtools-installer. Hopefully that helps someone