question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:17 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
bvaughncommented, Mar 3, 2020

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.

1reaction
threepointonecommented, 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Firefox Developer Tools don't work with Webpack CSS source ...
I have a problem to make Firefox Developer Tools (Firefox Developer Edition 59.0b7) work with CSS source maps generated by Webpack in ...
Read more >
Browser console shows DevTools failed to load SourceMap ...
Solution · Go to the developer tools (F12 in the browser); · Select the Cogwheel in the upper right corner; · In the...
Read more >
Source map errors — Firefox Source Docs documentation
You can sometimes encounter problems working with source maps. This page explains the most common problems and how to fix them.
Read more >
4 Reasons Why Your Source Maps are Broken - Sentry Blog
This happens when a browser or tool downloads a compiled file (e.g., script.min.js ), then attempts to fetch its corresponding source map ( ......
Read more >
Documentation | U.S. Web Design System (USWDS)
Sourcemaps : We recommend using a sourcemap tool like gulp-sourcemaps to assist debugging by keeping track of source Sass locations. Sass and theme...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found