style-loader breaks source maps in Firefox 59

[robertjk]

Do you want to request a feature or report a bug?

Report a bug.

What is the current behavior?

When I have style-loader in my CSS loaders chain, the source maps do not work in Firefox. I see error messages in the Developer Tools console like the one below. Setting convertToAbsoluteUrls: true doesn't change the situation.

Source map error: Error: sourceMapURL could not be parsed Resource URL: blob:http://localhost:8080/3a52944e-4117-4d8d-98d6-32cd525beae9 Source Map URL: data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3JvYmVydC9wcm9ncmFtbWluZy93ZWJwYWNrLXBsYXlncm91bmQvc3JjL2NvbXBvbmVudC1hL3NyYy9jb21wb25lbnQtYS9jb21wb25lbnQtYS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlBO0VBRUksY0FBYTtFQUNiLHVCQUFzQjtFQUN0QixrQkFBaUIsRUFZcEI7RUFWRztJQUNJLG1CQVhJO0lBWUosaUJBQWdCO0lBQ2hCLGlCQUFnQixFQUNuQjtFQUVEO0lBQ0ksbUJBaEJNLEVBaUJUIiwiZmlsZSI6ImNvbXBvbmVudC1hLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIkbWFyZ2luOiA1cHg7XG4kcGFkZGluZzogMTBweDtcblxuXG4uQ29tcG9uZW50QSB7XG5cbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgZmxleC13cmFwOiBub3dyYXA7XG5cbiAgICAmLUhlYWRlciB7XG4gICAgICAgIG1hcmdpbi1ib3R0b206ICRtYXJnaW47XG4gICAgICAgIGJhY2tncm91bmQ6ICNlZWU7XG4gICAgICAgIGZvbnQtc2l6ZTogMS41ZW07XG4gICAgfVxuXG4gICAgJi1Cb2R5IHtcbiAgICAgICAgcGFkZGluZy1sZWZ0OiAkcGFkZGluZztcbiAgICB9XG5cbn1cbiJdLCJzb3VyY2VSb290IjoiIn0=[Learn More]

When I remove style-loader and use extract-text-webpack-plugin instead, the source maps start to work. In addition even if style-loader is used, everything works fine in Chrome Developer Tools.

I created an example repo with the problem: https://github.com/robertjk/webpack-firefox-source-map-error.

What is the expected behavior?

I expect source maps to work properly in Firefox, as they do when style-loader is not used.

Additional info

Firefox version: 59.0b8
Node.js verison: 9.5.0
webpack version: 3.11.0
style-loader version: 0.20.1

[alexander-akait]

@robertjk Thanks!

[alexander-akait]

@robertjk Confirm, let's investigate, maybe bug in firefox

[robertjk]

@evilebottnawi What do you mean by "Confirm"? Yes, it may be a bug in Firefox, as in Chrome everything works fine.

[alexander-akait]

@robertjk Confirm is mean it are not you local or configuration problems 😄

[robertjk]

@evilebottnawi Oh, I get it :).

[alexander-akait]

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

[alexander-akait]

In firefox@59 all works fine. Seems bug in firefox. Only wds failed, but not related to style-loader.

[mikehdt]

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?

[redeyes2015]

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".

[ghost]

The same is happening to me. It's breaking my Vue app on Firefox only (works fine on Chrome, Edge and Safari). I'm also using CSS variables as mentioned here.

Firefox version: 59.0.2
Node.js verison: 9.5.0
webpack version: 4.4.1
style-loader version: 0.20.3

[alexander-akait]

I think it is firefox bug, somebody can take care this issue and create report to firefox bugs tracker?

[redeyes2015]

I think this is the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1451274,
and it directs to mozilla/source-map#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. 😢

[heyflo]

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 :

[bigkrp]

have same issue

[elliottregan]

Anyone find a temporary workaround? Any chance a plugin could reformat the URL to work?

[wokejacqueline]

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.

[elliottregan]

@wokejacqueline This issue over in the main Webpack repo has some more info than this issue has: webpack/webpack#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.

[Epskampie]

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

[minhtranite]

I think so, Thank you! The warning message on Firefox are gone but source map still not work.

[alexander-akait]

@mikehdt yep, source maps still not work in firefox 😞 try to search bug in their bug tracker

[alexander-akait]

Firefox bug:

• https://bugzilla.mozilla.org/show_bug.cgi?id=1451274
• https://bugzilla.mozilla.org/show_bug.cgi?id=1543896 (previously we use blob)

Sorry we can't do something on our side here, please write to firefox bug tracker

[Austaras]

works fine for me in Firefox after 1.0 release

[alexander-akait]

@Austaras it is strange, can you provide example? Also provide Firefox version

[Austaras]

@evilebottnawi this repo
Firefox 69.0b10-1

[alexander-akait]

@Austaras thanks, maybe firefox fix bug in latest release, i have problems on 68.0.1 (64-bit)

[minhtranite]

@Austaras I clone and run you example on Firefox nightly but it still not work

[Austaras]

@minhtranite
that's wired. It works in Firefox 58 in my machine. Did you turn on enable sourcemap in developer tool?

[bn4z]

Hi! If the info can help: I'm using Firefox 69.0b11 (64-bit) on Windows 10. Upgrading from style-loader 0.23.1 to 1.0.0 removed the message Source map error: TypeError: Invalid URL: . in the console.

[loganfsmyth]

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.

[elliottregan]

@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. 🙄

[alvaro-escalante]

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

[alvaro-escalante]

@Austaras I clone and run you example on Firefox nightly but it still not work

Disable react dev tools, it worked for me

[Grsmto]

@alvaro-escalante does that mean it's a React Dev Tools issue? I searched but I didn't find any issue reported on their repo.

[elliottregan]

It's not a React Dev Tools problem. This issue has more info and discussion: webpack/webpack#1194

[alvaro-escalante]

@alvaro-escalante does that mean it's a React Dev Tools issue? I searched but I didn't find any issue reported on their repo.

React Dev Tools did in fact affect the sourcemaps on Firefox with style-loader, I have tested it.

But in the end I started using the hmr option from MiniCssExtractPlugin and discarded the style loader all together as it does not work with react dev tools, now it works but is a bit slower.

"scripts": {
    "build": "webpack -p --config=config/webpack.config.js --env production --progress",
    "start": "webpack-dev-server --config=config/webpack.config.js --env dev --progress --color --open"
  },

Note I am using a config folder to store my webpack.config.js hence the paths

{
  module: {
    rules: [
      {
        test: /\.scss$/,
        include:  '../app',
        exclude:  /node_modules/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader, 
            options: { hmr: true }
          },
          'css-loader?sourceMap', 
          'sass-loader?sourceMap'
        ]
      }
    ]
  },
  plugins: [ new MiniCssExtractPlugin()]
}

[elliottregan]

I am not using a -D flag, and I can't find it mentioned in the docs. I've only seen that for npm i -D package-name.

Any idea what that could have been interpreted as?

It's confusing me because this doesn't really match what others have discovered, unless it is triggering some unexpected behavior. There are definitely race conditions that cause it to work occasionally, and maybe an errand flag can clue us in.

[alexander-akait]

Still broken 😞

[alexander-akait]

Sorry for delay, looks reasonable #303 (comment), I will look at this deeply

[loganfsmyth]

@evilebottnawi Are you sure it's still broken? I think https://bugzilla.mozilla.org/show_bug.cgi?id=1607639 has fixed this. When I run the reproduction example, I see SCSS files in the style editor in FF.

[alexander-akait]

Strange, I reproduce this problem on FF? Can you provide version of FF?

[mbalaam]

@evilebottnawi I found I had less problems with Firefox if I set this in my webpack plugin settings:

new webpack.SourceMapDevToolPlugin({ filename: false, //inline all source maps - best Firefox compatability }),

[minhtranite]

It seems that now it's works on Firefox 79

[alexander-akait]

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