React-devtools: DevTools failed to parse SourceMap: http://localhost:8097/backend.js.map

[rybon]

I'm seeing this warning in the console. I can't tell if it is due to my project setup, or something in React DevTools. I'm using the standalone Electron app, the React code is running in an iframe.

[Nimelrian]

It's definitely due to the devtools, it also appears for me when I'm just serving my app (no iframe, or anything, just a simple web app)

[restj90]

also seeing it on app created with create-react-app

[KINGH242]

In Chrome, I get the warning ;

"DevTools failed to parse SourceMap: http://localhost:8097/backend.js.map"

And in IE11;

SCRIPT5009: 'Symbol' is undefined

[Nimelrian]

The server seems to be configured in a wrong way, since it simply returns backend.js when backend.js.map is requested, leading to the error when trying to parse the source map (since it's just simple JS). The actual source map on disk is right though.

[Talamantez]

Hi - The accepted answer on this page resolved the issue with loading the DevTools. I am using Chrome on OSX with the Standalone React DevTools Application. React code is running in Browser. The solution for me was to disable 'enable js source maps' and 'enable css source maps' in the Chrome Inspector Settings, then restart everything https://stackoverflow.com/questions/44267503/devtools-failed-to-parse-sourcemap

[ZeroZipZilch]

The solution for me was to disable 'enable js source maps' and 'enable css source maps' in the Chrome Inspector Settings

This hides the error message, but doesn't resolve the issue. In fact, it makes it a tad bit worse.

This is Chrome devtools with sourcemaps enabled:

As you can see, even though the warning is shown, the sourcemaps work, making the warning merely a disturbance. Now, this is Chrome devtools with sourcemaps disabled:

If sourcemaps are disabled in Chrome developer-tools, the warning disappears, but so do the sourcemaps.

A _temporary_ solution (which by no means is good, but works) is to:

• Go to wherever react-devtools is installed, (in my case %APP_DATA%/Roaming/npm/node_modules/react-devtools)
• Go to ./node_modules/react-devtools-core/build/backend.js
• Open the file in your editor
• Scroll to the bottom
• Remove //# sourceMappingURL=backend.js.map

This will hide the warning while preserving the sourcemaps for your own app. It will also hide sourcemaps for react-devtools (such as closing devtools, but when deveolping a separate app those don't really matter)

---

While experimenting I attempted to visit http://localhost:8097/backend.js.map while react-devtools was running, and it appears like what I actually see is the contents of backend.js rather than backend.js.map. I agree with Nimelrian. It appears like the server serving these files is misconfigured. Visiting http://localhost:8097 also shows the contents of backend.js

[dguayrobotiq]

Also having this issue here. Anyone have found a solution ?

[Nickman87]

Same issue here, but we don't want the sourcemaps to be publicly available.
Is it possible to modify the build so that the sourcemaps are still present, but not referenced to directly and only used on demand and thus getting rid of this warning?

[EddyP23]

I have the exact same question as @Nickman87

[rvbonfimm]

Yet having the same issue, just for community report.

[bvaughn]

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools