SCSS module is not loading on route change when using dynamic import

[SZharkov]

Bug report

After I've implemented dynamic loading of components - some of the components are not loading their scss module when changing the page. I see no issues in dev mode and that's only related to the production.

Describe the bug

My app is dynamic, pages and sections are generated dynamically (based on received data from the server).
It works this way:

1. I open the homepage. All the components are working ok.
2. Using navbar I navigate to another page (without page refresh) and from this point some of the components are loaded without styles.
3. Once I refresh the page - styles are working again

System information

• Latest version of Next.js

[jamesmosier]

Hi @SZharkov. Can you please provide a full reproduction of this issue in a repository?

[SZharkov]

@jamesmosier that's problematic, because the project is private. And I am not sure whether trying to reproduce from scratch will show this issue. I just hope that somebody faces the same issue.
I guess that the problem could be related to this part of code -

next.js/packages/next/pages/_document.tsx

Line 168 in 11fce3a

let dynamicCssFiles = dedupe(

. When changing the page it just stops injecting css for some components.

[SZharkov]

@jamesmosier you can find the reproduction in this repo - https://github.com/SZharkov/dynamic-import-no-styles.
Just next build and next start. Then try to navigate between pages, for example from homepage to page1 etc, and you will see that the styles are not applied for some of the components for example text is dark while it should be red. Then when you see this inconsistency - reload page, styles will be ok again, but try to navigate to another page and they will be broken again.

[SZharkov]

@jamesmosier do you have any update? :)

[zenhob]

I am seeing the same behavior, but with productions builds only, it works as expected in development mode.

[SZharkov]

Really would appreciate to hear some thoughts. This bug blocks me from optimizing projects using dynamic imports and that affects negatively on page speed and scores too much 😞

[Timer]

This was fixed on next@canary.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.