react: Bug: React Developer Tools conflicts with Firefox sass sourcemaps on webpack

The React Developer Tools add-on conflicts with Firefox source maps displaying just inline for all sass partials, works on Google Chrome. When the add-on is disabled it all works fine again.

React version: 16.13.0 Firefox version: 74

Steps To Reproduce

Use style-loader, css-loader and sass-loader with the add-on enabled on Firefox
Open Firefox Inspector, the source maps file name displays inline

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

The current behavior

It displays inline: for file name on Firefox inspector

The expected behavior

To display proper partials e.g. _page.sass:

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 17 (11 by maintainers)

Most upvoted comments

I just don’t understand why it should be Firefox’s problem, when disabling the add-on it fixes the issue.

Most people that care about source-maps and use Firefox, most likely, have turned to Google Chrome cause there’s no problem there, If this is the stance… you might as well not do a version for Firefox.

Browsers can have bugs that websites (or extensions) trigger. The websites/extensions can work around the bugs in some cases. (If you know of a workaround for this one, other than disabling the extension, let’s talk!) But the bugs themselves should be fixed on the browser side. Right?

An extension like React DevTools should not be able to break sourcemap parsing for the browser. It should not be possible, even if the extension wanted to. The fact that that’s happening, to me, indicates that there’s something on the Firefox side that should be fixed.

bvaughn on Mar 3, 2020

Closing. Happy to reopen if 1. There’s a reproducing case 2. There’s a logged issue with Firefox’ tracker and any suggested action that could isolate this as a react issue.

threepointone on Mar 3, 2020

Sounds like a browser bug. The two should have nothing to do with each other.

bvaughn on Mar 1, 2020