next/dynamic Resulting in style loss

[hyj111]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

"next": "^13.3.1",
    "react": "^18.0.2",
    "react-dom": "^18.0.2",
    "sass": "^1.26.10"

Which area(s) of Next.js are affected? (leave empty if unsure)

Dynamic imports (next/dynamic)

Link to the code that reproduces this issue

https://github.com/hyj111/next-dynamic-css-issue

To Reproduce

If a css module in a lazy load component is referenced in advance, the packaged code will cause the lazy load component style to be lost, but it is normal under dev

Describe the Bug

You can use the code of this warehouse to reproduce https://github.com/hyj111/next-dynamic-css-issue

Expected Behavior

The style of the lazy loading component can be loaded normally

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

next start

[KarlGe]

I think we've run into the same issue, but on Next 12 with Linaria. The styles seem to load fine SSR, but if you start on a different page and navigate client side to the page with lazy load the component will load but not the CSS extracted from that component.

We found that all the style sheets are in the head, but only with rel="preload" so we made a "workaround" by adding this as a script in _document.tsx

document.querySelectorAll("link[rel='preload'][as='style']").forEach((link) => { link.rel = "stylesheet"; });

This makes the browser load the scripts as it should, but is clearly not a good solution to this.

[Krasnopir]

i made something similar, but on router events callback

https://github.com/vercel/next.js/issues/33286#issuecomment-1824253407

[alexgilbertDG]

This is still an open issue for us !