next/dynamic causing Runtime Exception for Suspense boundary starting with 13.0.7 #45488
Closed
1 task done
Labels
Lazy Loading
Related to Next.js Lazy Loading (e.g., `next/dynamic` or `React.lazy`).
Verify 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
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
The text was updated successfully, but these errors were encountered: