New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

sourceMap seems not to work with Firefox #640

Closed
kud opened this Issue Dec 7, 2017 · 8 comments

Comments

Projects
None yet
4 participants
@kud
Contributor

kud commented Dec 7, 2017

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

This comment has been minimized.

Show comment
Hide comment
@kud

kud Dec 7, 2017

Contributor

Chrome:

image

Firefox:

image

Contributor

kud commented Dec 7, 2017

Chrome:

image

Firefox:

image

@kud

This comment has been minimized.

Show comment
Hide comment
@kud

kud Dec 7, 2017

Contributor

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": ""
}
Contributor

kud commented Dec 7, 2017

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": ""
}
@evilebottnawi

This comment has been minimized.

Show comment
Hide comment
@evilebottnawi

evilebottnawi Dec 7, 2017

Member

@kud can you create minimum reproducible test repo?

Member

evilebottnawi commented Dec 7, 2017

@kud can you create minimum reproducible test repo?

@kud

This comment has been minimized.

Show comment
Hide comment
@kud

kud Dec 7, 2017

Contributor

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

Contributor

kud commented Dec 7, 2017

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

@casdevs

This comment has been minimized.

Show comment
Hide comment
@casdevs

casdevs Jan 31, 2018

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?

casdevs commented Jan 31, 2018

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?

@evilebottnawi

This comment has been minimized.

Show comment
Hide comment
@evilebottnawi

evilebottnawi Jan 31, 2018

Member

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

Member

evilebottnawi commented Jan 31, 2018

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

@evilebottnawi

This comment has been minimized.

Show comment
Hide comment
@evilebottnawi

evilebottnawi Feb 13, 2018

Member

Thanks everyone! Problem in style-loader, we investigate this. Ref: webpack-contrib/style-loader#303

Member

evilebottnawi commented Feb 13, 2018

Thanks everyone! Problem in style-loader, we investigate this. Ref: webpack-contrib/style-loader#303

@steelx

This comment has been minimized.

Show comment
Hide comment
@steelx

steelx Jul 26, 2018

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

steelx commented Jul 26, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment