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 :)

No, the css is imported in Block and Block is imported in both pages so Block.jsx has import styles from './Block.module.scss'; and Page1/Page2 has: import Block from 'Components/@Shared/Block'; I would have assumed that the code would go to some common chunk but that did not happen. — Nightliss
– Nightliss, Commented Oct 21, 2020 at 8:00
I am unsure about the problem. I tried to setup react and router quickly to address the problem. Couldn't find anything like that. You can have a look at this codebase that i setup codesandbox.io/s/happy-jang-fesit?file=/src/App.js — Khondoker Zahidul Hossain
– Khondoker Zahidul Hossain, Commented Oct 21, 2020 at 8:28
Updated the codesandbox with a common component block. codesandbox.io/s/zen-ardinghelli-2ikcd — Khondoker Zahidul Hossain
– Khondoker Zahidul Hossain, Commented Oct 21, 2020 at 8:38
Apparently I was too enthusiastic about it being the solution. When shared component accepts className from parent for more fine tuned styling and is lazy loaded its own styles will overwrite passed styles ibb.co/vxsGwvb. Probably because its styles will be loaded later due to it being lazy. This is mental :) I don't see any way around that :/ — Nightliss
– Nightliss, Commented Oct 22, 2020 at 7:08

Muhammed Moussa · Accepted Answer · 2021-11-03 13:34:06Z

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>
  )
}

answered Nov 3, 2021 at 13:34

Muhammed Moussa

5,2471 gold badge39 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kefirchyk · Accepted Answer · 2023-01-23 13:36:39Z

0

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

answered Jan 23, 2023 at 13:36

Kefirchyk

1

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related