In /app/page, replace <main> and </main> by <Box> and </Box> (or with <div> or seemingly any other)
Launch npm run dev
See error:
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <div> in <div>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
gluestack-ui Version
@gluestack/ui-next-adapter@2.1.11
Platform
[ ] Expo
[ ] React Native CLI
[X] Next
[ ] Web
[ ] Android
[ ] iOS
Other Platform
No response
Additional Information
When <main> is not present the "gs-injected" div appears on server-side render, then disappears on client side.
Description
Unless the error can be fixed, the installation guide for Existing Projects should be updated, to help newcomers make it work: https://gluestack.io/ui/docs/guides/install-nextjs.
CodeSandbox/Snack link
No response
Steps to reproduce
npm create gluestack
<main>
and</main>
by<Box>
and</Box>
(or with<div>
or seemingly any other)npm run dev
gluestack-ui Version
@gluestack/ui-next-adapter@2.1.11
Platform
Other Platform
No response
Additional Information
When
<main>
is not present the "gs-injected" div appears on server-side render, then disappears on client side.