search

webpack-contrib / mini-css-extract-plugin

Lightweight CSS extraction plugin
MIT License
4.67k stars 388 forks source link

Duplication styles of same component in different chunks, when using CSS modules and React.lazy #964

Closed tippillow closed 2 years ago

tippillow commented 2 years ago

Bug report

css styles of "shared" component duplicated when using css modules and react-lazy. It can broke styles in some scenarios

Actual Behavior

1

duplicated

Expected Behavior

2

not duplicated

How Do We Reproduce?

  1. check https://github.com/tippillow/cra-css-modules-different-chunks-duplication
  2. npm i
  3. npm run build
  4. serve -s build
  5. navigate to page1 -> check list styles -> navigate to page2 -> check styles
  6. check styles duplication

4

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

alexander-akait commented 2 years ago

It means they have common modules in different chunks and webpack decide to duplicate it

tippillow commented 2 years ago

@alexander-akait is it possible to make css shared chunk?

alexander-akait commented 2 years ago

Yes, using splitChunks or just put it in common file

tippillow commented 2 years ago

@alexander-akait okay, thank you, will check https://webpack.js.org/plugins/split-chunks-plugin/

tippillow commented 2 years ago

@alexander-akait thx, made shared chunk, duplication has gone, you are the best

aliakseikulba commented 1 year ago

@tippillow hi! i'm using CRA, react lazy, react-router and routes code splitting, have the same issue. could you help? what is your solution to make shared chunk?

tippillow commented 1 year ago

@aliakseikulba hi! My CRA project was ejected, so i easily access webpack.config.file and add splitChunk option. Please read link above. If you don't want to eject your project, you can use https://github.com/timarney/react-app-rewired or it's alternatives.

I made branch add-shared-chunk in my project, where i created shared chunk, so you can look and try it. I hope I helped, let me know. Good luck!