Importing a component in both _app.js and a page duplicates component css

[guilhermehn]

Repro: https://github.com/guilhermehn/next-duplicate-css-repro

Steps to reproduce

• npm ci
• npm run build
• npm start
• inspect Button component

When Button is used by _app.js and a page it's css is duplicated.

Observations

• Button is a basic component with css module
• happens only on production build

Is this expected behaviour?

[guilhermehn]

Probably related to #11448 and #12343.

[bigtimeyash]

+1

[iksent]

I experience the same bug for a whole last year.
This definitely won't be fixed from Discussions and we should open a new issue.

[guilhermehn]

Created issue #20203

[Webbrother]

I found dozens of similar issues

• CSS Module chunking isn't working as intended - duplicates. #11448
• Styles duplicated across css chunks create source order issues #12343
• Inconsistent loading order of CSS in dev mode #11946
• Duplicated styles creates a source order issue when importing CSS modules from node_modules using next-transpile-modules #12099
• Importing a component in both _app.js and a page duplicates component css #20203

... and most of them was closed without any solution by balazsorban44!
It is so weird just to close the issue. I'm absolutely don't understand it. It looks like balazsorban44 thinks if no activity in ticket the it was magically resolved by itself.

I have the same issue with next@13.2.4, and still no solution. Three years since first issues about CSS duplicating.

[landsman]

We have been fighting this issue for a while. It's a really sad state of the whole CSS module's implementation. I thought that CSS modules could be the safest option to work with styles in Next 14 with the app folder. It seems not.

Please attention to this poor long-term problem with developer UX @leerob 🙏

[terrymun]

This is definitely still an ongoing issue and we are running the latest version of Next.js at the time of writing (14.0.4). This is especially problematic as we are working on a large monorepo, where one package is our component library. Classes from this component library is being present in multiple bundles loaded from the client when moving from one route to another, resulting in unintended style overrides.

We did have a hacky way of fixing this due to the nature of our component library, which allows us to dictate that any style overrides is to be done with CSS properties, but this solution is definitely not one that can be universally applied to everybody's use cases.

[TheAlexGo]

Next 14.0.4 - it's still relevant. On two pages that use a common component, the styles of that component are added to the css.
Case:

1. Load the main page, page.css styles include .Icon_icon__ZG9ss

2. Click on the card and go to the second page
3. A new page.css is loaded with the same .Icon_icon__ZG9ss

4. We return to the main page - the layout breaks down, since the styles from the second page override the styles loaded at stage 1We return to the main page - the layout breaks down, since the styles from the second page override the styles loaded at stage 1

[chaowss]

have the exact same issue... only way ive found is to increase specificity with double selector declaration or using !important, but neither solutions are very nice.