Skip to content

Importing CSS file from an async component results in invalid script tags #51068

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

Closed
1 task done
danmartens opened this issue Jun 9, 2023 · 3 comments
Closed
1 task done
Labels
bug Issue was opened via the bug report template. stale The issue has not seen recent activity.

Comments

@danmartens
Copy link

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:53:44 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T8103
    Binaries:
      Node: 18.15.0
      npm: 9.5.0
      Yarn: 3.5.1
      pnpm: 8.6.1
    Relevant packages:
      next: 13.4.5-canary.9
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3

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

No response

Link to the code that reproduces this issue or a replay of the bug

https://github.com/danmartens/next-error-repro

To Reproduce

I tried to create as minimal of a reproduction as possible. Instructions are in the repository, but basically you can run pnpm install and then node test.mjs broken to see the reproduction. That script will build the app and then repeatedly visit the broken URL via Puppeteer.

It only happens about 4-6% in the app I'm working on, but I was able to get it to happen basically 100% of the time by playing around with it for a while. The issue seems to be related to some sort of race condition, so you may have to increase the delay value in src/app/broken/test-1/layout.tsx to reproduce the issue. On my machine, I start to see failures with a 3ms delay and the error rate reaches ~100% with a 6ms or greater delay.

Describe the Bug

When an async component that imports CSS renders within an async page component with an adjacent loading.tsx and an async layout component with export const revalidate = 0;, Next will generate invalid script tags for importing the CSS if the request takes longer than a certain amount of time. The script tags look like this and are always the last element before the </body> tag:

<script>B:1","S:1",[["/_next/static/css/ef46db3751d8e999.css","next"]])</script>

Expected Behavior

All <script> tags should contain valid JavaScript.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

@danmartens danmartens added the bug Issue was opened via the bug report template. label Jun 9, 2023
@benokif
Copy link

benokif commented Oct 24, 2023

Same issue here with CSS modules, it makes it impossible to style async components in nested routes.
There is a workaround: in the nested route folder, you can import the style in layout instead of page. This is not always desirable though, and only works for components defined at the page level, not for reusable ones defined in a components folder.
version: 13.5.3

@nextjs-bot
Copy link
Collaborator

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

@nextjs-bot nextjs-bot added the stale The issue has not seen recent activity. label Apr 21, 2025
@nextjs-bot
Copy link
Collaborator

This issue has been automatically closed due to two years of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!

@nextjs-bot nextjs-bot closed this as not planned Won't fix, can't repro, duplicate, stale Apr 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. stale The issue has not seen recent activity.
Projects
None yet
Development

No branches or pull requests

3 participants