search

everweij / react-laag

Hooks to build things like tooltips, dropdown menu's and popovers in React
https://www.react-laag.com
MIT License
907 stars 47 forks source link

[BUG]: Hydration fails with nextjs app router #96

Open Stekmo opened 1 year ago

Stekmo commented 1 year ago

Describe the bug A clear and concise description of what the bug is. renderLayer causes hydration errors when using the nextjs app router.

To Reproduce Steps to reproduce the behavior:

  1. Create nextjs project with default configuration (fx. Codesandbox or npx create-next-app)
  2. Implement a tooltip with react-laag
  3. Load the page with the tooltip
  4. See error

Example here https://codesandbox.io/p/sandbox/pensive-waterfall-tmw3dt?file=%2Fapp%2Fpage.tsx%3A12%2C1

Expected behavior Wrapping the component in "use client" should not cause hydration errors.

Screenshots image

Browser / OS (please complete the following information):

Package versions

darksuei commented 1 year ago

Hello @everweij Can I be assigned this? I have run into a similar hydration error recently and might be able to fix this.

SalahAdDin commented 10 months ago

Hello @everweij Can I be assigned this? I have run into a similar hydration error recently and might be able to fix this.

did you fix it?