electron: DevTools failed to parse SourceMap: http://aaa.server.com/javascripts/touch.min.js.map

You can disable sourcemaps for JS in DevTools from the command palette:

The message really isn’t the problem. Without sourcemaps you can’t really debug, tools like react inspector and redux dev tools won’t work. We are back in the days of IE thanks to this issue

I “solve” it for now by writing -DevTools in the console filter input to hide them.

Same issue here.

Get spammed by a couple of hundred DevTools failed to parse SourceMap.

Electron 8.2.0.

Started after we upgraded to 8+.

I have the same problem when loading file system source map from renderer process.

As a result I found that electron incorrectly resolve the sourceMappingURL based on the web page origin(might by document.origin?) if the script is loaded using require() instead of document.createElement or <script>.

Just change the //# sourceMappingURL= let it to be relative from the page and check again.

Version: node 12.16.3, Chrome 85.0.4183.121, and Electron 10.1.3.

can confirm this is still an issue in the latest release. when using ts modules & preload it seems to search for sourcemap in directory relative to html file root, instead of the importet script

EDIT: a quick fix for people using typescript is to use inline source maps instead

This is still a problem with latest versions of everything 😦 Node: v12.18.3 Chrome: 88.0.4324.96 Electron 11.2.2

Bump

Still a problem

bump

I think I may have a workable solution (it worked in my case but maybe different to you). Follow the following steps.

WARNING: This will not work if the URL in the error message is not in your local machine e.g. file:///… will work but not **example.co/… **

1. Check your Error Message: Your error message tells you which package is missing. So in my case, my error was:

DevTools failed to load SourceMap: Could not parse content for file:///C:/Users/username/Desktop/StockX/underscore.js.map:

The error says it can’t find underscore.js.map which then you find the missing package on npm

1. Install the Missing Package: Now you find your package on npmjs.com (mine was Underscore, @liangzhuang327 's missing package is touch) and you run npm install {PACKAGE}

2. Find and Copy the File to its Final Location: Now go to the node_modules folder and go to the package’s (the one you just installed) corresponding folder. Your final operating path should be

{PROJECT_ROOT}
| node_modules
| | {PACKAGE}

You should now find the missing file in your error (mine is underscore.js.map, @liangzhuang327 's is touch.min.js.map) and copy it over to where the error is trying to find it (if it’s trying to find it somewhere other than your local computer, this fix won’t work) which in my case is the project root folder.

1. Rinse and repeat for every error of this kind you have (in my case 2 separate errors)

and you’re done!

Edit: for a domain url, if you have admin access, do the same but on the server

The same is for me with Electron 8.2.1, electron-builder 22.4.1 and electron-packager 14.2.1 With Electron 7.2.1 it also not working well But it works on 6.1.9

You can disable sourcemaps for JS in DevTools from the command palette:

Ctrl+Shift+P -> Disable JavaScript source maps.

Not ideal but worked best for me.

@lekoaf well my solution worked for me but, it might not work for all so your solution is a great backup until github fixes this issue

I try if (isDevelopment) { mainWindow.webContents.on('devtools-opened', () => { mainWindow.loadURL(...) } } else { mainWindow.loadURL(...) } and other ways in 2379. it’s not work