Css-loader: sourceMap seems not to work with Firefox

[kud]

What is the current behavior?

        {
          test: /\.module\.css$/,
          use: [
            {
              loader: 'style-loader',
            },
            {
              loader: "css-loader",
              options: {
                sourceMap: true,
                modules: true,
                importLoaders: 1,
                localIdentName: "[path][name]--[local]-___[hash:base64:5]",
                import: true,
                alias: {
                  "~": `${SRC_DIR}`,
                },
              },
            },
            {
              loader: "postcss-loader",
              options: {
                ident: "postcss-module",
                plugins: loader => [
                  require("postcss-custom-media")({
                    extensions: require("./mediaQueries"),
                  }),
                ],
              },
            },
          ],
        },

If the current behavior is a bug, please provide the steps to reproduce.

• Set sourceMap: true,, open your project with Firefox

What is the expected behavior?

• Like on Chrome, it should display the right source file.

I've got this error on Firefox:

Source map error: Error: sourceMapURL could not be parsed
Resource URL: blob:http://xxx/b348e8de-fc45-7a41-b7b8-6a93e0fbbd60
Source Map URL: data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9rdWQvUHJvamVjdHMvX2NvbnRleHRlL2xvaXMtd2ViYXBwL3NyYy9jb21wb25lbnRzL0xheW91dC9IZWFkZXIudGFibGV0Lm1vZHVsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSx1QkFBdUI7RUFDdkIsb0JBQW9CO0NBQ3JCOztBQUVEO0VBQ0UsaUNBQWlDO0VBQ2pDLGNBQWM7RUFDZCwrQkFBK0I7RUFDL0IsZUFBZTtFQUNmLGFBQWE7Q0FDZDs7QUFFRDs7O0VBR0UsYUFBYTtFQUNiLGNBQWM7RUFDZCxvQkFBb0I7Q0FDckI7O0FBRUQ7RUFDRSx3QkFBd0I7RUFDeEIsa0JBQWtCO0VBQ2xCLGtDQUFrQztDQUNuQzs7QUFFRDtFQUNFLGtCQUFrQjtFQUNsQixxQkFBcUI7RUFDckIsWUFBWTtFQUNaLHdCQUF3QjtFQUN4QixrQ0FBa0M7Q0F…

Is it because I didn't sourceMap style-loader? However, it works on chrome so…

[kud]

Chrome:

Firefox:

[kud]

I've decoded the sourcemap given, this is the result:

{
  "version": 3,
  "sources": [":hidden:/src/styles/variables.css"],
  "names": [],
  "mappings": "AAAA;EACE,0BAA0B;EAC1B,yBAAyB;EACzB,+BAA+B;EAC/B,kCAAkC;EAClC,kCAAkC;EAClC,2CAA2C;EAC3C,mCAAmC;EACnC,kCAAkC;EAClC,2CAA2C;EAC3C,gCAAgC;EAChC,8BAA8B;EAC9B,6BAA6B;EAC7B,2BAA2B;EAC3B,mCAAmC;EACnC,mCAAmC;EACnC,4CAA4C;EAC5C,yBAAyB;EACzB,4CAA4C;EAC5C,4BAA4B;EAC5B,gCAAgC;EAChC,iCAAiC;EACjC,0CAA0C;EAC1C,uCAAuC;EACvC,+BAA+B;CAChC",
  "file": "variables.css",
  "sourcesContent": [":root {\n  --color--default: #424242;\n  --color--action: #2574a9;\n  --color--action-hover: #176397;\n  --color--action-inversed: #e1f3ff;\n  --color--accepted-status: #2cad3e;\n  --color--accepted-status-inversed: #e6f7e3;\n  --color--action-secondary: #626262;\n  --color--rejected-status: #d34545;\n  --color--rejected-status-inversed: #ffe7e7;\n  --color--external-link: #b8b8b8;\n  --color--zone-active: #e5e5e5;\n  --color--zone-hover: #fcfcfc;\n  --color--tag-grey: #f5f5f5;\n  --color--unread-indicator: #d0d0d0;\n  --color--action-decorator: #0e4d77;\n  --color--action-decorator-inversed: #669dc2;\n  --color--header: #2b2b2b;\n  --color--action-secondary-inversed: #8d8d8d;\n  --color--icon-grey: #d5d5d5;\n  --color--new-card-grey: #faf9f9;\n  --color--button-outline: #e1e1e1;\n  --color--inactive-button-outline: #e7e7e7;\n  --color--search-icon-inversed: #7b7b7b;\n  --color--card-outline: #e6e6e6;\n}\n"],
  "sourceRoot": ""
}

[alexander-akait]

@kud can you create minimum reproducible test repo?

[kud]

I'll give a try when I've got time, yes. :)

[casdevs]

I have a similar error when including new bootstrap v4's ./scss/_root.scss and ./scss/_reboot.scss files. All the other bootstrap v4 files work.

Maybe the error occurs when using css variables like :root {--color--default: #424242; --color--action: #2574a9;}?

Did you find a solution?

[alexander-akait]

@casdev-stefan can you create minimum reproducible test repo and describe you problem, what is wrong?

[alexander-akait]

Thanks everyone! Problem in style-loader, we investigate this. Ref: https://github.com/webpack-contrib/style-loader/issues/303

[steelx]

is there any workaround ! Cause I really want to use Firefox over RAM monster (..chrome)

this is my webpack config : https://github.com/steelx/angular4-starter/blob/master/webpack.config.js