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 causing Runtime Exception for Suspense boundary starting with 13.0.7 #45488

Closed
1 task done
idmedia-kaiser opened this issue Feb 1, 2023 · 4 comments
Closed
1 task done
Labels
Lazy Loading Related to Next.js Lazy Loading (e.g., `next/dynamic` or `React.lazy`).

Comments

@idmedia-kaiser
Copy link

idmedia-kaiser commented Feb 1, 2023

Verify canary release

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

Provide environment information

Operating System:
Platform: linux
Arch: x64
Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
Binaries:
Node: 16.17.0
npm: 8.15.0
Yarn: 1.22.19
pnpm: 7.1.0
Relevant packages:
next: 13.1.7-canary.1
eslint-config-next: 13.1.5
react: 18.2.0
react-dom: 18.2.0

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://codesandbox.io/p/sandbox/wonderful-haze-bo0ujx

To Reproduce

Open index page in the codesandbox and reload the page
image

This is a simplification of the bug we are facing if we update to latest version
Basically when a state update happens and the useSelector updates a component with a dynamic component inside, it throws an unexpected runtime error

Describe the Bug

After updating to 13.0.7-canary.3 or above an unhandled React runtime error is thrown in develop mode

Unhandled Runtime Error Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

After some digging I guess its related to this PR
Implement loadable with lazy and suspense for next dynamic #42589

Expected Behavior

There should be no runtime error

Which browser are you using? (if relevant)

Chome 109.0.5414.120

How are you deploying your application? (if relevant)

No response

@idmedia-kaiser idmedia-kaiser added the bug Issue was opened via the bug report template. label Feb 1, 2023
@idmedia-kaiser
Copy link
Author

@huozhi Guess this is related to #42589

@huozhi huozhi added Lazy Loading Related to Next.js Lazy Loading (e.g., `next/dynamic` or `React.lazy`). and removed bug Issue was opened via the bug report template. labels Feb 3, 2023
@SukkaW
Copy link
Contributor

SukkaW commented Feb 3, 2023

IMHO this is a duplicate of #44083

Try upgrading to React 18.3.0 (npm i react@next react-dom@next) and then the issue should be gone.

If you encounter the wakeable.then is not a function error after upgrading to React 18.3.0, please refer to facebook/react#25994 and apply a workaround I created here: facebook/react#25994 (comment)

@huozhi
Copy link
Member

huozhi commented Feb 4, 2023

Close as duplicated, will track it in #44083

@huozhi huozhi closed this as completed Feb 4, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Mar 6, 2023

This closed issue has been automatically locked because it had no new activity for a month. 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 Mar 6, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Lazy Loading Related to Next.js Lazy Loading (e.g., `next/dynamic` or `React.lazy`).
Projects
None yet
Development

No branches or pull requests

3 participants