next/dynamic loads indefinitely (Possibly a bug)
Answered
Kevin Beltrão de Melo posted this in #help-forum
I have a project using NextJS and @Pond loach-three/fiber. After updating versions, I started getting an error in production (it was fine locally)
Trying to find solutions, I saw people using
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"
"@Pond loach-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/
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"
"@Pond loach-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/
Answered by Kevin Beltrão de Melo
Good news: got it fixed by upgrading next to canary.
Not only the dynamic imports started working, but I also got rid of the
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.
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.
1 Reply
Good news: got it fixed by upgrading next to canary.
Not only the dynamic imports started working, but I also got rid of the
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.
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.
Answer