Undocumented Next.js hydration error if the page is not enclosed by <main> tag

[Gwened]

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

1. Create a project using npm create gluestack
2. In /app/page, replace <main> and </main> by <Box> and </Box> (or with <div> or seemingly any other)
3. Launch npm run dev
4. 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/[email protected]

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.

[surajahmed]

@Gwened Thanks for reporting this. We'll try to reproduce and update you on this.

[AlexCernik]

Hi, any solution? @Gwened @surajahmed