chakra-ui
Hydration Errors
What component (if applicable)
- Component name: Page Shells
Describe the bug I'm consistently seeing hydration errors in Next.js when rendering your components.
To Reproduce
- In latest Next.js with latest React
- Add a Chakra UI page shell to the app
- Refresh the page
- See error
Expected behavior I expect to be able to use the Page components as is using mainstream React tools like Next.js
Screenshots
Browser/Device (if applicable)
- Chakra UI version [e.g. 1.1.6] latest
- Browser [e.g. chrome, safari] Chrome latest
Additional context Add any other context about the problem here.
Workaround:
const isDesktop = useBreakpointValue({ base: true, lg: true }, "base")
@iMerica I was having the same "Hydration failed" issue with useBreakpointValue and Next.js and found this issue.
In my case, setting the defaultBreakpoint to base didn't work (same issue when loading the page directly) but it did work when I set defaultBreakpoint to, for example, lg.
Looking at the commit that introduced this argument, it looks like base is the default value passed into useBreakpoint so this shouldn't be occurring anymore regardless of providing the defaultBreakpoint. Anyway, just leaving this comment for the next person struggling with this.
