React: Bug: Error loading source maps for devtools extension

[Friss]

React version: 16.x.x

Steps To Reproduce

1. Have latest React devtools installed in Chrome
2. Open console and see warning about failure to load source maps.

Looks to be related to https://github.com/facebook/react/pull/19773

Link to code example:

The current behavior

Console logs about failure to load source maps

The expected behavior

No console logs because of the extension

[hqwuzhaoyi]

I have the same warning, and my componet is always loading.

but it works on 4.8.2

[codingbycat]

I have the same warning in React^17.0.0 too

[bvaughn]

Sorry about the hassle here. I'm not sure why Chrome is showing this warning, as the source map URLs are correct. If anyone would like to dig into this, I'd welcome the help.

[bvaughn]

@hqwuzhaoyi Your comment does not seem related to this thread. If you're seeing a problem with a component's props loading, please file a separate issue with repro instructions.

[bvaughn]

Looks like a potentially related CR bug from back in February: https://bugs.chromium.org/p/chromium/issues/detail?id=1052872

[bvaughn]

A simple fix for this might be to revert the changes from #19773 to files within packages/react-devtools-extensions (but leave the other packages with source maps enabled).

[sytranvn]

@bvaughn I tried reverting the changes in packages/react-devtools-extensions and it fixed. Please help to review the PR #20079. Thanks.

[Friss]

Thanks for the quick work @bvaughn @sytranvn

We've run into similar issues with our own chrome extension so no big deal :D

[danielpickett]

Still having this issue. It looks like my React DevTools extension is still on version 4.9.0.

How do I get the version with the fix that was merged above? Removing and re-adding the extension didn't work. Sorry for the rookie question, but I'm sure others will be landing here with the same question.

[bvaughn]

The fix has not been released. You're running the latest DevTools. Once this fix gets releasd, Chrome will update you.

[danielpickett]

Oh, I see. Thank you!

[joaomelo]

I don't know if is of any help for fixing the bug, but anyhow sharing my experience, some of the messages did not appear anymore in Chrome after I right-clicked the React Dev Tool extension icon in the toolbar, clicked "manage extension" (I'm freely translating menu text here since my browser language is in Brazilian Portuguese), and then enabled "Allow access to files URLs."

[Willi-Smith]

I don't know if is of any help for fixing the bug, but anyhow sharing my experience, some of the messages did not appear anymore in Chrome after I right-clicked the React Dev Tool extension icon in the toolbar, clicked "manage extension" (I'm freely translating menu text here since my browser language is in Brazilian Portuguese), and then enabled "Allow access to files URLs."

This unfortunately doesn't work for me.

• Chrome: 88.0.4315.5 (Official Build) dev (64-bit)
• fresh install of React Developer Tools
• no other extensions

Console still polluted by:

DevTools failed to load SourceMap: Could not load content for chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/injectGlobalHook.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/contentScript.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

[bvaughn]

As I said above, the fix for this has not been released yet. Releasing DevTools takes a decent amount of time and I haven't had the time to publish an update yet.

[federico7marroquin]

be patient guys

[bvaughn]

Version 4.10 has been published to NPM and posted to Chrome/Firefox/Edge stores. Chrome usually takes a while to approve (hours, sometimes days).