search

gluestack / gluestack-ui

React & React Native Components & Patterns (copy-paste components & patterns crafted with Tailwind CSS (NativeWind))
https://gluestack.io/
MIT License
2.43k stars 116 forks source link

in next app router using a Center before Heading leads to a hydration error #1918

Open macrozone opened 6 months ago

macrozone commented 6 months ago

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

  1. clone the repo
  2. yarn install
  3. yarn dev
  4. goto localhost:3000
  5. click the first link
  6. 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

Other Platform

No response

Additional Information

No response

surajahmed commented 6 months ago

@macrozone Thanks for reporting this. We'll have a look.

JavanPoirier commented 6 months ago

@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 👀

farmhutsoftwareteam commented 5 months ago

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

sra1kumar-NULL commented 13 hours ago

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.