sourceMapURL could not be parsed in Firefox

Jan-Klaas · January 18, 2019, 10:19am

Sass source maps don’t work in Firefox when using yarn start.
I’ve read some old resources suggesting it could be the style-loader module that is generating the issue.

This is the error:

Source map error: Error: sourceMapURL could not be parsed Resource URL: blob:http://localhost:3000/cefc770b-0968-d742-b821-fc2e571332b8

Resources I’ve fount:

github.com/webpack-contrib/style-loader

style-loader breaks source maps in Firefox 59

opened 02:15PM - 13 Feb 18 UTC

robertjk

type: Bug semver: Patch priority: 4 (important) severity: 3 (broken)

**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

It works as expected in Chrome though. Is this the same old issue, is there a fix yet?