next/dynamic loads indefinitely (Possibly a bug)

[unborn trout]

I have a project using NextJS and @odd sapphire-three/fiber. After updating versions, I started getting an error in production (it was fine locally) hydration failed because the initial ui does not match what was rendered on the server..

Trying to find solutions, I saw people using next/dynamic's dynamic to disable ssr for those components. Once again, works perfectly locally, but it gets stuck on the loading in prod.

Being more specific: the components causing the first error and hanging on dynamic's loading are the ones that use Three.js.

"react": "18.2.0"
"next": "13.2.3"
"@odd sapphire-three/fiber": "^8.11.9"

Referred file importing the components:
https://github.com/KevBeltrao/kevbeltrao-website/blob/main/src/pages/index.tsx

Live website:
https://kevbeltrao.com.br/

[wide cove]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[unborn trout]

Good news: got it fixed by upgrading next to canary.

Not only the dynamic imports started working, but I also got rid of the hydration failed issue.

It is worth mentioning that this error keeps happening to many different versions of Next, and it's possible to find people complaining about it since 2018 on GitHub threads. This should be looked at to stop breaking it in new releases. I'm unsure about the best way to do so, but it might be interesting to have a step of tests before releasing new versions to check the application's health and resolution of dynamic imports after the build.