react-devtools 3.5.1 breaks standalone mode for Chrome Extensions

[jamaljsr]

I upgraded to v3.5.1 today and now I cannot inspect my Browser Extension through Chrome as I did previously. See usage-with-react-dom

The console displays the error:

Uncaught ReferenceError: ReactDevToolsBackend is not defined

I've found what appears to be the problem. ReactDevToolsBackend is hard coded in standalone.js. The global exported by webpack was changed to backend in the recent commits v3.5.0 28d36a22 and v3.5.1 bcf6b1aa.

To fix this locally, I updated standalone.js replacing

res.end(backendFile + '\n;ReactDevToolsBackend.connectToDevTools();');

with

res.end(backendFile + '\n;backend.connectToDevTools();');

[bvaughn]

Hm...I am also unable to launch connect the standalone DevTools to Chrome, but not for the reason you mention. The error I'm getting is:

Error: ENOENT: no such file or directory, open '/build/backend.js'

[bvaughn]

I upgraded to v3.5.1 today

Could you clarify what you upgraded? Was it react-devtools or react-devtools-core (or both)?

[jamaljsr]

Oh, I got that error also but thought it was something on my machine only. I am glad you see it as well. I forgot I manually copied backend.js to C:\build\backend.js.

[bvaughn]

Gotcha! Thanks for confirming.

[jamaljsr]

I upgraded ‘react-devtools’ to v3.5.1

[bvaughn]

Yeah, makes sense now that I know you were also seeing the other error. Was confusing before. 😄

[bvaughn]

A fix has been published to NPM as 3.5.2.

[jamaljsr]

Thanks for the quick fix & deployment to npm. I confirmed this does indeed resolve both of the original issues, except it introduced an even more rare use case bug. Sorry to be the guy that piles on more bad news.

A new error pops up when installed as a global package (npm install -g react-devtools), which of course is my case. If the package is installed locally (via package.json) then it works fine. The standalone.js is looking for backend.js in the local node_modules folder always, even when the package is installed globally.

I think this image can explain the issue better than I can in written form:

[bvaughn]

Can you please confirm that you're not still getting an older version of react-devtools-core ?

# Remove older versions just to be safe
npm remove -g react-devtools-core && npm remove -g react-devtools

# Install latest release
npm install -g react-devtools

react-devtools

Because I'm able to do a clean install of 3.5.2 and connect to DOM without the error mentioned above.

[jamaljsr]

Yup, after I upgraded the global package, I realized the old backend.js was being served to my app. After a bit of investigation, I found that i did still have react-devtools-core installed in my local node_modules even after i uninstalled react-devtools. So I did a rm -rf node_modules && npm install to start from scratch. That's when this error showed itself. (Note: react-devtools is not in my package.json)

I followed your steps just to be sure, but the error still persists. Here's the cmd output:

[bvaughn]

Hm. Not sure why you're loading code from C:\Data\Projects/LightningJoule in that screenshot. It should be coming from an NPM module. Looks like you have a local fork or something.