Bug: React Developer Tools conflicts with Firefox sass sourcemaps on webpack
See original GitHub issueThe 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
andsass-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:
Issue Analytics
- State:
- Created 4 years ago
- Comments:17 (6 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.
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.