You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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
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.
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!
Verify 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 thennode 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 withexport 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: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
The text was updated successfully, but these errors were encountered: