CSS modules duplicated when used with `next/dynamic` #25456

mrmckeb · 2021-05-25T15:05:38Z

What version of Next.js are you using?

10.2.2

What version of Node.js are you using?

14.16.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

When using next/dynamic with CSS modules, we've found that CSS can be re-inserted (duplicated)

In our scenario, we have a simple <Text /> component that is already in use throughout the application. When we used <Text /> in a new component that was dynamically imported, styles for <Text /> were re-inserted.

These styles were inserted below all other styles, breaking some styles that rely on specificity - which is how we found this bug.

As a temporary workaround, we've removed that component from the dynamically loaded component.

Expected Behavior

Styles should not be re-inserted/duplicated.

To Reproduce

We haven't been able to reliably reproduce this in a standalone repo.

We've looked and found some potentially similar issues, and this might be related: #20203.

The text was updated successfully, but these errors were encountered:

sgehrman · 2021-09-25T12:02:54Z

I'm getting duplicate css without using dynamic.

timneutkens · 2021-09-27T10:50:41Z

@sgehrman please provide a reproduction

bscaspar · 2021-11-01T23:05:26Z

I am encountering a similar issue - CSS modules are getting duplicated and overwritten for similar components on a page - e.g. implementations of a custom <Button /> component - after one of these components is dynamically loaded. No issue when the conditional dynamic component is not loaded. There's a clear flash of changing styles once the dynamic component is loaded.

Update: was initially on next@11.1.2, updating to v12.0.2 didn't fix this issue.

rikani · 2022-03-09T16:00:57Z

Next.js v12.1.0 still has problem.

Puvvl · 2022-04-12T09:34:17Z

Next.js 12.1.4 still has problem

ycfreeman · 2022-05-25T06:33:21Z

12.1.6 still has problem

PhilipeGatis · 2022-06-07T12:48:50Z

12.1.5 still has problem

NikooDev · 2022-06-08T22:05:35Z

12.1.6 still has problem :

PepeBotella25 · 2022-07-04T13:30:29Z

Repo to reproduce this:
https://github.com/PepeBotella25/css_module_dynamic_issue

Initially

After adding dynamic component using the same "shared" component

Since you need css chunks to reproduce it you have to do build+start

npm run build
npm run start

When second component get added its css brings the "shared" styles again affecting the cascade order:

X7Becka · 2022-07-30T12:02:51Z

Yeah, 12.2.3 still no workaround

yakovlev-alexey · 2022-12-26T11:48:10Z

Experienced this issue in 12.3.1 and found a workaround.

TL;DR: add a hidden (display: none should work) div in App/Page. In this div render all the components that have their styles duplicated.

Explanation: webpack (or whatever) seems to check whether components used in a dynamic import are already present on the page. In my case everything was fine when a loadable component was imported on a specific page. Later I moved the component to _app.tsx and styles started to duplicate in the CSS file emitted for the loadable component.

Say you have a few components:

App (pages/_app.tsx)
Page (pages/index.tsx)
Button (components/button.tsx)
LoadableModal (components/loadable-modal.tsx)
LoadableModal uses Button

* uses means imports either directly or indirectly but without dynamic imports.

The issue may be reproduced in a few ways:

LoadableModal is used in App, Button is used in Page (sure, tested)
LoadableModal is used in Page, Button is used in App (not sure, need to test)
Button is used neither in Page nor in App. There is an additional LoadableForm component that uses Button used on the same page. (not sure, need to test)

When building Next.js checks imports to see whether components used in dynamic are already present on the page. Since the relation between Page and App is not direct there is no way for it to detect that the Button is already used.

My workaround was the following: add a hidden (display: none should work) div in App/Page. In this div render all the components that have their styles duplicated. With this fix in place Next.js should properly deduplicate styles.

Perhaps it is also possible to not render the component at all by using {false && <Button />}.

aloeugene · 2023-02-09T12:45:22Z

We're also experiencing this with Next@13.1.5.

And it's not reproducing running locally with next dev, which makes it even worse given the fact that we need to double-check such issues by building "prod" version locally OR just observing it when it gets to QA env (which uses "prod" version).

uaeio · 2023-03-22T16:01:11Z

It seems that this issue is connected with: #42082

Webbrother · 2023-03-24T08:08:52Z

The same issue without using dynamic.
next@13.2.4

I'm wondering why this problem persists for a few years and a lot of tickets was closed without any solution.

potapovnikita · 2023-08-01T21:37:00Z

any solutions for this issue?

vasylkorchynskyi · 2023-08-11T13:14:30Z

Any updates here? Have the same issue with next@13.4.7

AustinCase · 2023-08-15T05:25:40Z

I am also having this issue with next@13.4.5 -- I am actively trying to work on reproduction, perhaps will lend itself to the issue.

My instinct is that it has to do with SSR and the bundling magic between layouts/pages...

roman-veryovkin · 2023-08-25T10:23:44Z

I have the same issue with next@13.4.17. Any workarounds so far?

AustinCase · 2023-08-25T13:46:07Z

I can actively reproduce it without dynamic.

Create a shared component outside of app directory.
Create two or more pages that utilize the shared component.
Notice that the shared component has duplicate styles.

Even if you have not visited both pages, if you have a Link component ( or something else that preloads the other page ). The server will stream down two css files, both with the EXCACT same selectors.

The browser for good reason can't dedup css selectors, instead it essentially does a merge. Ultimately I am just worried about the performance hit here, since it is doing the dedup on basically every shared component. Its also messy to read and a bad dev experience.

Hope this helps :)

monolithed · 2023-10-18T06:27:07Z

This bug is present even without using next/dynamic

Egor-Dubovik · 2023-11-07T10:27:22Z

I have the same issue in next@13.5.6 even without dynamic imports. Seriously this problem has been going on for so long and it still hasn't been fixed?

…d of PageTitleWrapper. Also cancelled cache wrapping for getPropertyDevelopers to get fresh list each time user needs it. Also re-activated redirecting to the Home page when clicked on Sidebar logo. Related ongoing next.js bug of multiple css module files for the Sidebar(client component) rendered inside layout(server component) - @ref-link: vercel/next.js#25456

zachsitka · 2024-03-13T16:02:24Z

This is still an issue for me using next@14.1.3

EDIT: using dynamic imports

maiconsanson · 2024-03-13T18:24:52Z

It seems to be solved in 14.1.3 without dynamic imports (production only, dev still duplicating) for me.

#61198

ivangorbunoff · 2024-04-08T18:59:08Z

is there any solution? In large projects where components are often reused, duplicating styles greatly increases the final css file size.
This is still an issue for me using next@14.1.4

lalexgap · 2024-08-01T16:23:20Z

We still see duplicate CSS for dynamic imports on 14.2.3 in our production builds. It would be great to have a fix for this!

mrmckeb added the bug Issue was opened via the bug report template. label May 25, 2021

ijjk added kind: bug and removed bug Issue was opened via the bug report template. labels May 25, 2021

ijjk added this to the Iteration 21 milestone May 25, 2021

ijjk assigned sokra and ijjk May 25, 2021

timneutkens modified the milestones: Iteration 21, Iteration 22, Iteration 23 Jun 21, 2021

styfle modified the milestones: 11.1.x, 12.0.4 Nov 5, 2021

timneutkens added Webpack Related to Webpack with Next.js. Lazy Loading Related to Next.js Lazy Loading (e.g., `next/dynamic` or `React.lazy`). labels Nov 16, 2021

timneutkens removed this from the 12.0.5 milestone Nov 17, 2021

mrmckeb closed this as completed Jan 6, 2022

mrmckeb reopened this Jan 6, 2022

This comment was marked as off-topic.

Sign in to view

6220119 mentioned this issue Aug 30, 2022

CSS Module resolution conflict with dynamic import in production mode #40080

Open

1 task

This comment has been minimized.

Sign in to view

zecka mentioned this issue Dec 24, 2023

Duplication of CSS rules #42082

Open

1 task

zecka mentioned this issue Jan 18, 2024

[NEXTJS] css style rules duplication across page/layout/loading vanilla-extract-css/vanilla-extract#1276

Open

2 tasks

samcx added bug Issue was opened via the bug report template. and removed kind: bug labels Apr 30, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS modules duplicated when used with `next/dynamic` #25456

CSS modules duplicated when used with `next/dynamic` #25456

mrmckeb commented May 25, 2021

sgehrman commented Sep 25, 2021

timneutkens commented Sep 27, 2021

bscaspar commented Nov 1, 2021 •

edited

Loading

This comment was marked as off-topic.

This comment was marked as off-topic.

rikani commented Mar 9, 2022

Puvvl commented Apr 12, 2022

ycfreeman commented May 25, 2022

PhilipeGatis commented Jun 7, 2022

NikooDev commented Jun 8, 2022

PepeBotella25 commented Jul 4, 2022 •

edited

Loading

X7Becka commented Jul 30, 2022

yakovlev-alexey commented Dec 26, 2022 •

edited

Loading

aloeugene commented Feb 9, 2023

uaeio commented Mar 22, 2023

Webbrother commented Mar 24, 2023

potapovnikita commented Aug 1, 2023

vasylkorchynskyi commented Aug 11, 2023

AustinCase commented Aug 15, 2023

roman-veryovkin commented Aug 25, 2023

AustinCase commented Aug 25, 2023

This comment has been minimized.

monolithed commented Oct 18, 2023

Egor-Dubovik commented Nov 7, 2023

zachsitka commented Mar 13, 2024 •

edited

Loading

maiconsanson commented Mar 13, 2024 •

edited

Loading

ivangorbunoff commented Apr 8, 2024 •

edited

Loading

lalexgap commented Aug 1, 2024

CSS modules duplicated when used with next/dynamic #25456

CSS modules duplicated when used with next/dynamic #25456

Comments

mrmckeb commented May 25, 2021

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

Expected Behavior

To Reproduce

sgehrman commented Sep 25, 2021

timneutkens commented Sep 27, 2021

bscaspar commented Nov 1, 2021 • edited Loading

This comment was marked as off-topic.

This comment was marked as off-topic.

rikani commented Mar 9, 2022

Puvvl commented Apr 12, 2022

ycfreeman commented May 25, 2022

PhilipeGatis commented Jun 7, 2022

NikooDev commented Jun 8, 2022

PepeBotella25 commented Jul 4, 2022 • edited Loading

X7Becka commented Jul 30, 2022

yakovlev-alexey commented Dec 26, 2022 • edited Loading

aloeugene commented Feb 9, 2023

uaeio commented Mar 22, 2023

Webbrother commented Mar 24, 2023

potapovnikita commented Aug 1, 2023

vasylkorchynskyi commented Aug 11, 2023

AustinCase commented Aug 15, 2023

roman-veryovkin commented Aug 25, 2023

AustinCase commented Aug 25, 2023

This comment has been minimized.

monolithed commented Oct 18, 2023

Egor-Dubovik commented Nov 7, 2023

zachsitka commented Mar 13, 2024 • edited Loading

maiconsanson commented Mar 13, 2024 • edited Loading

ivangorbunoff commented Apr 8, 2024 • edited Loading

lalexgap commented Aug 1, 2024

CSS modules duplicated when used with `next/dynamic` #25456

CSS modules duplicated when used with `next/dynamic` #25456

bscaspar commented Nov 1, 2021 •

edited

Loading

PepeBotella25 commented Jul 4, 2022 •

edited

Loading

yakovlev-alexey commented Dec 26, 2022 •

edited

Loading

zachsitka commented Mar 13, 2024 •

edited

Loading

maiconsanson commented Mar 13, 2024 •

edited

Loading

ivangorbunoff commented Apr 8, 2024 •

edited

Loading