Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

next/dynamic Resulting in style loss #47655

Closed
1 task done
hyj111 opened this issue Mar 29, 2023 · 5 comments · Fixed by #72959
Closed
1 task done

next/dynamic Resulting in style loss #47655

hyj111 opened this issue Mar 29, 2023 · 5 comments · Fixed by #72959
Labels
bug Issue was opened via the bug report template. Lazy Loading Related to Next.js Lazy Loading (e.g., `next/dynamic` or `React.lazy`). locked

Comments

@hyj111
Copy link

hyj111 commented Mar 29, 2023

Verify canary release

  • 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

@hyj111 hyj111 added the bug Issue was opened via the bug report template. label Mar 29, 2023
@github-actions github-actions bot added the Lazy Loading Related to Next.js Lazy Loading (e.g., `next/dynamic` or `React.lazy`). label Mar 29, 2023
@KarlGe
Copy link

KarlGe commented Oct 4, 2023

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
Copy link

i made something similar, but on router events callback

#33286 (comment)

@alexgilbertDG
Copy link

This is still an open issue for us !

@devjiwonchoi
Copy link
Member

devjiwonchoi commented Nov 30, 2024

Hey everyone, sorry for the long delay, and thank you for your patience.

The fix has been landed at PR #72959, release v15.0.4-canary.32, so feel free to try it, and let me know if it doesn't work for you. We are expecting to release this in the next release. Thank you!

Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 15, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. Lazy Loading Related to Next.js Lazy Loading (e.g., `next/dynamic` or `React.lazy`). locked
Projects
None yet
5 participants