search

nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
21.78k stars 1.49k forks source link

[BUG] - Hydration failed because the initial UI does not match what was rendered on the server #2073

Open Rimberse opened 10 months ago

Rimberse commented 10 months ago

NextUI Version

2.2.9

Describe the bug

Hello,

Upon trying to use the card component's isPressable property within Next.js i get this error: https://nextui.org/docs/components/card#primary-action

The card itself renders fine without this property. If I am understanding correctly the issue is that <Card /> converts to <Button /> during rendering and considering that it has nested <div> elements within it triggers this error. Is there a way to avoid it? What's the fix?

Your Example Website or App

http://localhost:3000

Steps to Reproduce the Bug or Issue

  1. Set up Next.js project
  2. Run it: npm run dev
  3. Create a component
  4. Use Next-UI card with isPressable property
  5. Observe the bug

Expected behavior

The card component should render without issues. isPressable property should not cause any console errors on runtime.

Screenshots or Videos

image

Operating System Version

Windows

Browser

Chrome

black197 commented 10 months ago

works fine in codesandbox

AveshLutchman commented 10 months ago

works fine in codesandbox

It works if everything is a client component, and you import from next-ui/react.

However, if you use it as a server component and then try to import it from next-ui/card the issue can be reproduced.

I was able to reproduce it by doing the above steps in your sandbox: codesandbox

aaronhawkey commented 10 months ago

Here is my recreation of this issue: Codesandbox When you refresh the page, hydration error occurs.

warloff commented 10 months ago

+1

MJChimal commented 9 months ago

+1

wingkwong commented 8 months ago

@aaronhawkey can you try the following

// app/providers.tsx
"use client";

import { useEffect, useState } from "react";
import { NextUIProvider } from "@nextui-org/react";

export function Providers({ children }) {
  const [isClient, setIsClient] = useState(false);
  useEffect(() => {
    setIsClient(true);
  }, []);
  return isClient ? <NextUIProvider>{children}</NextUIProvider> : <></>;
}
Alenriquez96 commented 7 months ago

I had this exact problem. My problem was that I had a<Button/>inside a <Card/> with isPressable property, and as you said, that was like having a button inside a button. I removed the property and its working fine.

aaronhawkey commented 7 months ago

This fixed my hydration issue: https://github.com/nextui-org/nextui/issues/2073#issuecomment-1953728672

favourwright commented 5 months ago

@aaronhawkey can you try the following

// app/providers.tsx
"use client";

import { useEffect, useState } from "react";
import { NextUIProvider } from "@nextui-org/react";

export function Providers({ children }) {
  const [isClient, setIsClient] = useState(false);
  useEffect(() => {
    setIsClient(true);
  }, []);
  return isClient ? <NextUIProvider>{children}</NextUIProvider> : <></>;
}

for me on using this method, nothing renders but a black page and errors on console.

// app/providers.tsx
"use client";

import { useEffect, useState } from "react";
import { NextUIProvider } from "@nextui-org/react";

export function Providers({ children }) {
  const [isClient, setIsClient] = useState(false);
  useEffect(() => {
    setIsClient(true);
  }, []);
  return isClient ? <NextUIProvider>{children}</NextUIProvider> : {children};
}

the above works but then useEffects are called multiple times(which is expected) because components are mounted and remounted when isClient becomes true

favourwright commented 5 months ago

😁 just realized it didn't work for me because I had the following structure

<Provider>
  <body></body>
</Provider>

all my providers are in <Provider> so by doing return isClient ? <NextUIProvider>{children}</NextUIProvider> : <></>; inside my provider, it meant my entire document didn't have a body tag at some point.

rearranging stuff like this, fixed it

<body>
  <Provider>
  </Provider>
</body>
ronniechoyy commented 2 months ago

image still happen right now, NextJS 14 page route That's a joke, even a button also have bug that's need a useEffect hack to fix

arbile26 commented 2 months ago 
 <></>;

You saved me hours of searching. Thank You!

AriaFantom commented 1 week ago 
 <></>;

You saved me hours of searching. Thank You!

What do you mean how to use react fragements and where?