style-loader: style-loader breaks source maps in Firefox 59

I’m having the same problem with webpack 4 (4.12.1 - lastest version) and firefox dev edition (62.0b3 - lastest version too). I tried for some hours to implement correct sourcemaps for my dev environment with webpack and I just could not solve it. Just to find out it’s a known issue and it’s working perfectly on Chrome.

Here is what I get :

Edit: Sorry, I think I may have been mistaken. I’m still getting issues

Source map error: TypeError: Invalid URL: . Resource URL: blob:http://localhost:3000/791aca78-2069-644a-b742-90df574570dc

Firefox Nightly 67 seems to have a fix in place for this issue (in today’s build at least)

I’m not sure what you mean by “In firefox@59 all works fine” – I’m seeing style-loader sourcemaps failing in both Firefox 59 and current dev version 60?

I looked into this on the Firefox side, and I’m not sure I’d consider this a Firefox bug, but rather a case where Chrome may have more fallbacks to handle invalid sourcemaps. We can certainly look into potentially handling this, but the map as it stands does not contain valid sources for this context.

In the case of the example provided in the initial post, the extract-text-webpack-plugin example map that works has

  "sources": [
    "webpack:///./src/component-a/src/component-a/component-a.scss",
    "webpack:///./src/component-b/src/component-b/component-b.scss"
  ],

and the map style-loader map that doesn’t work has

  "sources": [
    "/tmp/webpack-firefox-source-map-error/src/component-a/src/component-a/component-a.scss"
  ],

with the critical difference being that the first is an absolute URL, and the second is only a path-absolute URL, meaning that the second one requires a valid base URL in order to be resolved into a full URL (and the blob: URL used in this case is not a valid base).

When this map is loaded, it is resolved based on the URL of the CSS file, so you end up with

new URL("/folder/file.scss", "blob:http://localhost:8080/some-hash")

which then throws because you can’t have a filepath relative to a blob URL. It seems like Chrome may have some fallback here that just uses the overall page’s URL if no other valid base is found.

For style-loader, it seems that Webpack does not rewrite the URLs in sources by passing them through Webpack’s output.devtoolModuleFilenameTemplate template, causing the issue. I’m not familiar enough with Webpack to know if there’s some way to make that happen, but it certainly seems like the ideal solution.

For me in turned out to be the React Developer tools add on, the moment I disabled it, the source maps changed from inline to the proper sass partial. It works with this set up:

rules: [{
  test: /\.scss$/, 
  use: [
    'style-loader', 
    'css-loader?sourceMap',
    'sass-loader?sourceMap'
   ]
}]

Firefox Developer Edition 71.0b5 / macOS Mojave

In near future i will refactor style-loader and release major version (1) and i will look how we can fix it

A solution is ditching style-loader and moving to css-hot-loader

npm install css-hot-loader mini-css-extract-plugin --save-dev

If your config was this:

{
    test: /\.css$/,
    use: [
        {
            loader: 'style-loader',
            options: { sourceMap: enableSourcemap },
        },
        {
            loader: 'css-loader',
            options: { url: false, sourceMap: enableSourcemap },
        },
        { loader: 'sass-loader', options: { sourceMap: enableSourcemap } },
    ],
}

It will now be this:

{
    test: /\.css$/,
    use: [
        {
          loader: 'css-hot-loader',
        },
        {
          loader: MiniCssExtractPlugin.loader,
        },
        {
          loader: 'css-loader',
          options: { url: false, sourceMap: true },
        },
    ],
}

Hot reloading works, source maps work

This is still happening to me in Firefox 61.02. Is this a confirmed Firefox bug? It’s been happening since 59 for me. No issues in Safari.

I think “Only wds failed” may not be accurate.

With the example repo provided by the issue opener, I ran:

> yarn webpack --config ./webpack.style-loader.babel.js
> serve dist

Firefox 58 and Firefox 60 (Developer Edition) both print “Source map error”.

Maybe we should search better way for https://github.com/webpack-contrib/style-loader/blob/master/lib/addStyles.js#L366

Fixed in Firefox 79, It’s been a long time, anyway I want to test it on other browsers, maybe we really can improve it

@loganfsmyth Thanks for doing all this research. I had a feeling it was a Webpack bug, because source maps have worked in Gulp and every other build tool I’ve used ans JS sourcemaps are broken, too.

Anybody know how we can get this escalated to someone who can merge PRs? The last PR for webpack-contrib that I got involved in has been sitting open since 2017. 🙄

@Epskampie you very very very increase build time, you don’t need extract css in dev env

@wokejacqueline This issue over in the main Webpack repo has some more info than this issue has: https://github.com/webpack/webpack/issues/1194 I haven’t found any devTool option that works, even though others have.

There are three or four projects that could offer a fix, but it seems like the project maintainers keep saying “the issue is over there”…for the last three years or so.

I think this is the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1451274, and it directs to https://github.com/mozilla/source-map/issues/275.

The issue is:

source-map uses a phony URL parser that does:

var urlRegexp = /^(?😦[\w+-.]+)😃?//(?😦\w+:\w+)@)?([\w.-])(?:😦\d+))?(.)$/;

So, one must at least write /*# sourceMappingURL=//somedomain/some.map and Blob URL could never pass.

It seems to be a long way for a fix to eventually land in Firefox. 😢