using react lazy in CRA with cssmodules causes chunks to have duplicate css in production

Question

I'm having similar issue seen here Webpack chunk styles and react.lazy.

I'm using react lazy to with react-router to make route based code-splitting. I have reusable component called Block which uses cssmodules and two pages (actually more than two but thats for an example). Both of them are lazy loaded and use Block multiple times.

On production the styles from Block seem to be in both chunks for the Pages, so when I initially load PageA its respective chunk is loaded. Everything is fine. Going to PageB also causes its chunk to be loaded. Now when going back to PageA both chunks are loaded and styles from PageB overwrite everything thus breaking layout.

Removing lazy import fixes the problem but that not the solution. While it's my first react project I'm quite sure I did everything correctly at least to my understanding.

To illustrate the problem here is screenshot of styles tab from devtools after entering few pages and going back to initial one

Any help is appreciated :)

Answer 1

I get this problem, and the solution for me was to import Layout component without using lazy, and use lazy for other page components And this problem was not in webpack.config.js file

Answer 2

tye this package works for me solved the same issue.

https://loadable-components.com/

import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))
function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  )
}

the nice part, it also split libs.

import loadable from '@loadable/component'
const Moment = loadable.lib(() => import('moment'))
function FromNow({ date }) {
  return (
    <div>
      <Moment fallback={date.toLocaleDateString()}>
        {({ default: moment }) => moment(date).fromNow()}
      </Moment>
    </div>
  )
}