React DevTools should bump the Electron version to 11.0.1 for darwin-arm64 builds

[mglukhovsky]

Environment:

• macOS 11.0.1 Big Sur, on an Apple Silicon (M1) chip
• React 17.0.1
• React DevTools 4.10.1, running in standalone mode via Electron 11.1.0 (darwin-arm64 build)
• New project using create-react-app . with the useScript hook to add the <script> tag required by React DevTools.

Steps to reproduce

1. Add React DevTools to a project with npm install --save react-devtools (or yarn).
2. react-devtools expects Electron 9.x.x; however builds for darwin-arm64 are only available for 11.1.0. Installation fails with:

npm ERR! code 1
npm ERR! path /Users/michael/git/components-blank/node_modules/electron
npm ERR! command failed
npm ERR! command sh -c node install.js
 HTTPError: Response code 404 (Not Found) for https://github.com/electron/electron/releases/download/v9.4.0/electron-v9.4.0-darwin-arm64.zip
 ...

Link to code example: mglukhovsky/react-devtools-components-blank

The current behavior

Workarounds are documented here; however a 11.1.0 build is required.

The expected behavior

Bump the version in package.json so this works out of the box.

[bvaughn]

Want to submit a PR (and test the bump)?

[mdaj06]

I can look into this @bvaughn

[bvaughn]

Okay.

[kivikakk]

Just wanted to add that bumping the version works well.

[jaiwanth-v]

Hi @mdaj06, are you working on this? If not, I'd like to take this issue.

[mdaj06]

Sure @jaiwanth-v im looking into another issue you can take it up!

[vladimirschneider]

I can update electron package version @bvaughn

[Raphael0147]

[devtools] Bump electron version from 9.1.0 to 11.1.0 for darwin-arm64 builds #20496

[vladimirschneider]

So, I think need close this issue @jaiwanth-v

[jaiwanth-v]

I think they'll close it once the PR is merged

[SaeedSheikhi]

How can we install this bumped version from github pull request? without waiting to be merged? @jaiwanth-v

[jaiwanth-v]

You'll have to clone my forked repo and build from source. You can find the instructions to build here

[badal897]

Can someone please tell how to use resolutions ? I am macbook pro m1 and when I hit the command ->
npm i -g react-devtools@"<4.11.0"

It gives the following error
HTTPError: Response code 404 (Not Found) for https://github.com/electron/electron/releases/download/v9.4.4/electron-v9.4.4-darwin-arm64.zip

What I tried is I downloaded the react devtools 4.10.1 in my local system and tried install it using
npm i -g 'path to downloaded repo'

Then I installed react-native-debugger and then again got the same issue.

Unsupported DevTools backend version
You are running react-devtools version 4.13.4-51ebccc374.
This requires bridge protocol version 1. However the current backend version uses bridge protocol version 0.

To fix this, downgrade the DevTools NPM package:
npm i -g react-devtools@"<4.11.0"

[alliuca]

My dirty workaround, things seem to work fine on my M1 machine:

• Install Electron 11 globally npm i -g electron@11.1.0
• Install react-devtools without the binary download ELECTRON_SKIP_BINARY_DOWNLOAD=1 npm i -g react-devtools@"<4.11.0"
• Remove the existing dist folder and path.txt in the react-devtools electro module
  • rm -rf $(dirname $(dirname $(which node)))/lib/node_modules/react-devtools/node_modules/electron/dist
  • rm -rf $(dirname $(dirname $(which node)))/lib/node_modules/react-devtools/node_modules/electron/path.txt
• Symlink the global electron installation to the react-devtools electron module installation
  • ln -s $(dirname $(dirname $(which node)))/lib/node_modules/electron/dist $(dirname $(dirname $(which node)))/lib/node_modules/react-devtools/node_modules/electron
  • ln -s $(dirname $(dirname $(which node)))/lib/node_modules/electron/path.txt $(dirname $(dirname $(which node)))/lib/node_modules/react-devtools/node_modules/electron

I also had to update the react-devtools-core package inside my global react-devtools installation to 4.11.0 (could use the same symlinking logic there too I guess)

[estebanmino]

thanks @alliuca! for me, just the first two steps worked on my M1 machine

• Install Electron 11 globally npm i -g electron@11.1.0
• Install react-devtools without the binary download ELECTRON_SKIP_BINARY_DOWNLOAD=1 npm i -g react-devtools@"<4.11.0"

[nicholasdunbar]

I had to follow the steps in https://gist.github.com/bvaughn/4bc90775530873fdf8e7ade4a039e579 mixed with @alliuca 's steps.

I'm using a mac M1 which npm i -g react-devtools@"<4.13.0" gives the error HTTPError: Response code 404 (Not Found) for https://github.com/electron/electron/releases/download/v9.4.4/electron-v9.4.4-darwin-arm64.zip

So I used the following modified steps:

npm uninstall -g react-devtools
npm i -g electron@11.1.0
yarn add -D react-devtools-core@4.13.0
ELECTRON_SKIP_BINARY_DOWNLOAD=1 npm i -g react-devtools@"<4.13.0"
rm -rf $(dirname $(dirname $(which node)))/lib/node_modules/react-devtools/node_modules/electron/dist && rm -rf $(dirname $(dirname $(which node)))/lib/node_modules/react-devtools/node_modules/electron/path.txt && ln -s $(dirname $(dirname $(which node)))/lib/node_modules/electron/dist $(dirname $(dirname $(which node)))/lib/node_modules/react-devtools/node_modules/electron && ln -s $(dirname $(dirname $(which node)))/lib/node_modules/electron/path.txt $(dirname $(dirname $(which node)))/lib/node_modules/react-devtools/node_modules/electron

[Snouzy]

The response by @nicholasdunbar works perfectly. Thanks. Just replace by the wanted version.
For example for me i wanted react-devtools 4.10.4 (the inspector couldn't inspect anything up this version)
So i just changed
yarn add -D react-devtools-core@4.13.0
and
ELECTRON_SKIP_BINARY_DOWNLOAD=1 npm i -g react-devtools@"<4.11.0".