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.
Duplication styles of same component in different chunks, when using CSS modules and React.lazy
See original GitHub issueBug report
css styles of “shared” component duplicated when using css modules and react-lazy. It can broke styles in some scenarios
Actual Behavior
duplicated
Expected Behavior
not duplicated
How Do We Reproduce?
- check https://github.com/tippillow/cra-css-modules-different-chunks-duplication
- npm i
- npm run build
- serve -s build
- navigate to page1 -> check list styles -> navigate to page2 -> check styles
- check styles duplication
Please paste the results of npx webpack-cli info here, and mention other relevant information
System: OS: macOS 10.15.7 Binaries: Node: 14.17.3 npm: 6.14.13 Browsers: Chrome: 93.0.4577.63 Safari: 13.1.3
Issue Analytics
- State:
- Created a year ago
- Comments:7 (2 by maintainers)
Top Results From Across the Web
using react lazy in CRA with cssmodules causes chunks to ...
When shared component accepts className from parent for more fine tuned styling and is lazy loaded its own styles will overwrite passed styles...
Read more >Styles duplicated across css chunks create source order issues
When I build the project that component's styles are duplicated in each of the relevant css page chunks; this creates visual bugs.
Read more >Styling Components In React - Smashing Magazine
CSS or SCSS Stylesheets is a styling strategy that involves the use of external CSS or SASS stylesheets that can be imported into...
Read more >Lazy loading React components - LogRocket Blog
Learn how to apply code-splitting and lazy loading to React components with React.lazy() and React.Suspense.
Read more >Frequently Asked Questions - Material UI - MUI
You have several applications that are using @mui/styles running on the same page (e.g., several entry points in webpack are loaded on the...
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
@alexander-akait thx, made shared chunk, duplication has gone, you are the best
@alexander-akait okay, thank you, will check https://webpack.js.org/plugins/split-chunks-plugin/