webpack: Webpack source maps are broken for debugging in Firefox

👋🏻 Firefox DevTools PM here.

I am collecting any remaining source-map issues after we fixed a whole lot in the past releases (summarized in my hacks article). I was glad to see that this a few issues mentioned here seem to be addressed, but I want to make sure.

We need your help 🙏. Please post if any remaining source map issues with the webpack configurations, potentially STRs or even open source projects that are affected. To let us understand our impact so far, please also share if previously broken source maps are working now. Feel free to reach out directly.

@wis @viorelsfetea @jasonLaster the extension’s CSP is not related to those errors, the source maps are fetched from a worker running on the devtools client side and so the CSP of the extension doesn’t have any effect on them.

Currently, a (very annoying) workaround to make the extensions’ sourcemaps available to the source-map worker could be to point the sourceMappingURL=... explicitly to an HTTP url, e.g. by temporarily changing it in the bundled/transpiled file into something like //# sourceMappingURL=http://localhost:8080/bundle.js.map and then make the source maps files available on that url by using something like python -m SimpleHTTPServer . The above workaround is also an additional proof that the extension CSP is not what is triggering this issue.

The actual issue is that Addon Debugging window is currently running in its own separate process and a separate Firefox profile from the Firefox browser instance where the extension is installed, and so the developer tools are trying to fetch the source map from a moz-extension url that is not available locally (where “locally” I mean “in the Toolbox process where the debugger UI and the worker that is fetching and parsing the source maps data are running”).

This issue is tracked by Bug 1437937 (and in this comment there are some details about a possible approach to fix it). To be fair the sources of the source-map module are part of the debugger-html github repo, and so we should probably file an issue also in the github repo, because the fix is likely to require changes to both the mozilla-central (for the changes needed on the “remote debugging server” side) and in the debugger-html repo (for the changes needed to the souce-map module, and on the debugger ui if needed).

Can we please fix this? I don’t want to choose Chrome as the browser only coz of this issue.

Using FF 46.0 on Ubuntu. eval-source-map - sort of works source-map - sort of works Where sort of works means, I can find the original JSX source files (which have no syntax highlighting), set a breakpoint into them and they are triggered. But the console always shows the useless bundle lines.

@digitarald This example still produces a source map error: https://github.com/robertjk/webpack-firefox-source-map-error

Source map error:: TypeError: Invalid URL: . Resource URL: blob:http://localhost:8080/043335f6-a69e-4f8d-bf28-9d20827bce60 Source Map URL: data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9zcnYvaHR0cGQvY2FyYXVzL3dlYnBhY2stZmlyZWZveC1zb3VyY2UtbWFwLWVycm9yL3NyYy9jb21wb25lbnQtYS9zcmMvY29tcG9uZW50LWEvY29tcG9uZW50LWEuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJQTtFQUVJLGNBQWE7RUFDYix1QkFBc0I7RUFDdEIsa0JBQWlCLEVBWXBCO0VBVkc7SUFDSSxtQkFYSTtJQVlKLGlCQUFnQjtJQUNoQixpQkFBZ0IsRUFDbkI7RUFFRDtJQUNJLG1CQWhCTSxFQWlCVCIsImZpbGUiOiJjb21wb25lbnQtYS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiJG1hcmdpbjogNXB4O1xuJHBhZGRpbmc6IDEwcHg7XG5cblxuLkNvbXBvbmVudEEge1xuXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXgtd3JhcDogbm93cmFwO1xuXG4gICAgJi1IZWFkZXIge1xuICAgICAgICBtYXJnaW4tYm90dG9tOiAkbWFyZ2luO1xuICAgICAgICBiYWNrZ3JvdW5kOiAjZWVlO1xuICAgICAgICBmb250LXNpemU6IDEuNWVtO1xuICAgIH1cblxuICAgICYtQm9keSB7XG4gICAgICAgIHBhZGRpbmctbGVmdDogJHBhZGRpbmc7XG4gICAgfVxuXG59XG4iXSwic291cmNlUm9vdCI6IiJ9

Firefox 68.0b9 (64-Bit)

See also https://github.com/webpack-contrib/style-loader/issues/303 (already linked above).

Firefox 50+ has fixed this, but it is not yet enabled by default:

• Fixed in: https://bugzilla.mozilla.org/show_bug.cgi?id=670002
• Announcement: https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Console_messages#Source_maps
• Enable by default: https://bugzilla.mozilla.org/show_bug.cgi?id=1289570

I can confirm that this is still an issue in Firefox Developer Edition 66.0b6 (64-bit) and works properly in Chrome.

@jasonLaster i’m developing a webExtension with Angular using the CLI (don’t have access to webpack config) and sourcemaps are not loading, is it CSP?

03:16:05.059 Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://9c9e49d3-2bf8-43ac-b952-1432b2ba877c/polyfills.js
Source Map URL: polyfills.js.map[Learn More]
03:16:05.074 Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://9c9e49d3-2bf8-43ac-b952-1432b2ba877c/runtime.js
Source Map URL: runtime.js.map[Learn More]
03:16:05.075 Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://9c9e49d3-2bf8-43ac-b952-1432b2ba877c/vendor.js
Source Map URL: vendor.js.map[Learn More]
03:16:05.076 Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://9c9e49d3-2bf8-43ac-b952-1432b2ba877c/main.js
Source Map URL: main.js.map[Learn More]
03:16:05.076 Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://9c9e49d3-2bf8-43ac-b952-1432b2ba877c/styles.js
Source Map URL: styles.js.map[Learn More]

here’s the CSP I’ve tried in manifest.json: "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self' blob: filesystem:;" everything’s fine in Chrome

For me sourcemaps work finally inside FF with this config:

output: { path: buildPath, //Path where the bundle should be exported filename: 'bundle.js', //Filename sourceMapFileName: 'bundle.js.map', //Filename publicPath: '/js/' //Where the js gets loaded from }, devtool: 'source-map',

Also please read this article: https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map

I published an edit for the article which is not reviewed yet, but it is about setting devtools.sourcemap.locations.enabled to true at the about:config section.

Enjoy.

📯 The fix for missing .vue files landed in today’s Nightly and will ride the trains with Firefox 80.

@theAdhocracy Errors like TypeError: Invalid URL: . should be fixed on Firefox Nightly right now, if you want to try that to verify.

Developer version didn’t work for me. I’m still not seeing sass sources (works in Chrome).

The key point here is that ‘eval-source-map’ is partially broken for Firefox (you can set break points in the original sources, but stack traces from exceptions point uselessly to the compiled version, and typically to an eval at that). ‘source-map’ works fine, and ‘inline-source-map’ also works. I haven’t tried all the options.

With Chrome, both work.

Please can we re-open, even if it is just a documentation fix.

I’m having issues with locating source maps in firefox only. Here’s an example of the warning:

Source map error: Error: NetworkError when attempting to fetch resource.
Resource URL: webpack:///./node_modules/rxjs/_esm5/index.js?
Source Map URL: index.js.map

Propably a FF issue…

I had the issue until now. I removed the line devtool: 'inline-source-map' from webpack configuration file and it works (it uses eval by default, does’nt it?).

@loganfsmyth Yep, just downloaded the latest version of Nightly and the errors are gone. That’s excellent news 👍

@digitarald Cheers, sent you some details

@darkship Whatever is causing [name] to still be in the URL is the problem. Something either in your config or in a plugin you’re using is creating an invalid URL. [name] isn’t valid in a URL like that, and Chrome seems to not be validating that properly.

AFAICS this got fixed in FF 67, can anybody confirm?

I’m having the exact same problem as @wis. the map file is there, I can access it by hand, but the extensions debugging window can’t see it. Does anybody have any ideas?

The only thing which works everywhere for me is: cheap-module-inline-source-map

According to https://bugzilla.mozilla.org/show_bug.cgi?id=1177329 this should be fixed in FF nightly builds. Afraid I can’t check as I’m on vacation at the moment

Closing due to inactivity. Please test with latest v5 and feel free to reopen if faced with the problem again (will be great if you provide reproducible test repo, this allow to fix a problem ASAP). Thanks!

Is anyone still having problems? Firefox 71 fixed many issue with source maps, need feedback

Works fine for me on the Developer Edition.

Is anyone still having problems? Firefox 71 fixed many issue with source maps, need feedback

@digitarald hi! is there any update on this? (was there a release of some kind where we could look at it?). Thanks

I have a vue app and source-map works perfectly with chrome but i still can’t make it work with FF v76.0.1, v77.0b9 developer ed. nor 78.0a1 nightly build. It works fine with js files but not with vue files. In my vue.config.js i have set configureWebpack: { devtool: “source-map”, … } What could be happening here? PLEASE HELP! THANKS

I had the same problem with [name] in the generated sourcemap, but in production build using devtool: ‘source-map’`.

I was using output.library with [name] as value.

Specifying output.devtoolNamespace fixed the problem. I defined an arbitrary string, debugging with FF works. Not tested with Chrome / Safari.

I had this issue with devtool: "inline-source-map" too .

Source map error: Error: Invalid URL: webpack://[name]/…/build_config/congig.js Resource URL: http://localhost:3000/bundles/bundle.vendor.js Source Map URL: data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9bbmFtZV0vLi4vYnVpbGRfY29uZmlnL2xvZ2dpbmdDb25maWcuanMiLCJ3Z…

Using the plugin new webpack.SourceMapDevToolPlugin({ filename: false}) and devtool: false option somehow fixed my sourcemap issue on FF.

I also noticed that chrome had “[name]” as sourcemap root node and with the plugin it was named “webpack”

I hope this helps some of you.

CC @rpl

On Thu, Jun 28, 2018, 9:21 AM Viorel Sfetea notifications@github.com wrote:

I’m having the exact same problem as @wis https://github.com/wis. the map file is there, I can access it by hand, but the extensions debugging window can’t see it. Does anybody have any ideas?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/webpack/webpack/issues/1194#issuecomment-401032184, or mute the thread https://github.com/notifications/unsubscribe-auth/AAPiYpZuz8vDItV_NEE8g_tdJ4hd4Q24ks5uBNh2gaJpZM4FLayh .

@jasonLaster we need testing to ensure problem doesn’t exists anymore looks we have reproducible repos above

@evilebottnawi : https://github.com/webpack-contrib/style-loader/issues/303

@evilebottnawi Okay, I’ll try to.

Ran into this today. FWIW, I filed a bug in Firefox with a reproducible test case: https://bugzilla.mozilla.org/show_bug.cgi?id=1434081. This affects a bunch of Mozilla projects so I’m hoping to apply some leverage to get this fixed.

@adamziel Actually it works in the debugger, it’s just that error messages in the console point to the compiled code: https://youtu.be/pgS3x1hGPZ0 I’ve contacted the developer on Twitter: https://twitter.com/alex_marandon/status/686514228572864512

👍