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

[alvaro-escalante]

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

1. Use style-loader, css-loader and sass-loader with the add-on enabled on Firefox
2. 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:

[jquense]

This seems like a sass loader or webpack. Issue not a React one?

[threepointone]

It’s not clear from this issue what this has to do with React. By “add-on” do you mean React dev tools? How would the devtools affect your situation? Please describe an exact set of steps, with screenshots, to reproduce this locally.

[alvaro-escalante]

I meant the React Developer Tools add-on for Firefox, its home page link directs you here.

[bvaughn]

I still have no idea how React DevTools could be interfering with your browser's source maps. It's just an extension that injects some JavaScript into the active tab for React to interact with. Has nothing to do with actual loading or parsing of resources.

If anything, this seems like a browser bug.

[alvaro-escalante]

I know it sounds strange, but it does happen, as bizarre as it may be. Toggle the React Developer Tools off and all is good.

[bvaughn]

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

[alvaro-escalante]

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

You are right they should not, but they do. I think that a tool that comes in to do a task on a browsers should consider the browsers they walk in to. Blaming the browser for something the browser was doing fine before the tool was enabled does not make any sense.

[threepointone]

We haven’t heard of this issue from anyone else. There isn’t much we can do from our side, I’d recommend filing an issue at https://bugzilla.mozilla.org/home against Firefox. I’ll leave this open for a while to see if anyone else has any idea.

[bvaughn]

I think we should just close this bug, Sunil. I think @alvaro-escalante (or anyone) should report this to Mozilla. For the time being, I am not aware of anything we are doing (or could do) that should affect how the browser loads or parses source maps.

[alvaro-escalante]

@bvaughn Have you tried to reproduce the problem?

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

I know it's a very niche problem that involves Firefox, Webpack, Sass source-maps and React Developer Tools, and so I am quite sure that few people have figured out that disabling the add-on fixes the problem. But it is a bug nonetheless.

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.

[hristo-kanchev]

Hello there @alvaro-escalante.

I had some time today to check your issue.

I can't reproduce the problem with Firefox 73.

Screen bellow:

For me the latest stable version of Firefox is 73.
I can see that Firefox 74 is currently in beta judging by MDN: 👇

As @bvaughn and @threepointone were saying - we haven't heard of a similar issue before.

I suggest we close this issue as it seems that it's on Mozilla's side.
It might be still be worth while to file an issue on https://bugzilla.mozilla.org/home

[threepointone]

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.

[alvaro-escalante]

Hello there @alvaro-escalante.

I had some time today to check your issue.

I can't reproduce the problem with Firefox 73.

Screen bellow:

For me the latest stable version of Firefox is 73.
I can see that Firefox 74 is currently in beta judging by MDN: 👇

As @bvaughn and @threepointone were saying - we haven't heard of a similar issue before.

I suggest we close this issue as it seems that it's on Mozilla's side.
It might be still be worth while to file an issue on https://bugzilla.mozilla.org/home

Hi @hristo-kanchev,

Thanks for trying this out.

The reason why it did not replicate is because you used my latest boilerplate repo which has a workaround on webpack.modules.js that uses MiniCssExtractPlugin. If you comment it out and use the commented loader below, the faster style-loader, the problem will indeed occur.

So basically you did not follow the Steps To Reproduce layout on my first bug comment.

[bvaughn]

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.

[hristo-kanchev]

Hi @alvaro-escalante

Even when I enabled the config that was commented out (the one you mentioned), I still wasn't able to replicate this.

[bvaughn]

I tried this with all versions of Firefox and no add-ons but the RDT.

Out of curiosity, I wonder if you would be willing to try with a different add-on (e.g. Redux DevTools, Vue or Preact DevTools) just to provide an additional data point.

[alvaro-escalante]

@bvaughn, sure:

It turns out that Redux DevTools also triggers it:

React Developer tools: ❌
Redux DevTools: ❌
Preact Developers Tools: ✅
Vue.js devtools: ✅