gluestack-ui
gluestack-ui copied to clipboard
gluestack
in next app router using a Center before Heading leads to a hydration error
Description
Using a Center, View or Box on your page before any Heading leads to a hydration error. More components may be affected
CodeSandbox/Snack link
https://github.com/macrozone/gluestack-hydration-reproduction
Steps to reproduce
best checkout the repo above https://github.com/macrozone/gluestack-hydration-reproduction
not sure whether this would work in a codesandbox, so i created a new nextjs app that shows the error
the reproduction is a freshly created nextjs app where gluestack is installed according to the guidelines https://gluestack.io/ui/docs/guides/install-nextjs
- clone the repo
- yarn install
- yarn dev
- goto localhost:3000
- click the first link
- reload the page --> hydration error
the bug only happens if Center is used before any header. The same error happens with Box and View. I did not check other components
As a workaround, you can add a empty heading
gluestack-ui Version
"@gluestack-style/react": "^1.0.49", "@gluestack-ui/config": "^1.1.16", "@gluestack-ui/themed": "^1.1.9", "@gluestack/ui-next-adapter": "^2.1.11",
Platform
- [ ] Expo
- [ ] React Native CLI
- [X] Next
- [ ] Web
- [ ] Android
- [ ] iOS
Other Platform
No response
Additional Information
No response
@macrozone, thanks for the report. I encountered this months ago and couldn't find the cause and when back to page router. Confirmed this was indeed the case. +1 👀
has anyone found a way to handle this , I mainly get it when using the text component, ended up using tailwind for texts.
NextJS 14 App Router
Hey @macrozone @JavanPoirier @farmhutsoftwareteam @philippbosch , The issue is from the Next js. Please wrap your layout file with <main> tag that should solve the issue for now. I've did the same for this repo https://github.com/macrozone/gluestack-hydration-reproduction too, and it worked fine.
Closing this issue for now, feel free to reopen on any issue encounter or discussion.