nextui icon indicating copy to clipboard operation
nextui copied to clipboard

Published 20 hours ago • verified publisher icon nextui-org

Hydration failed, React Hydration error with NextJs

Open JayMGurav opened this issue 3 years ago • 7 comments
trafficstars

Describe the bug

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Doesn't hydrate appropriately

Your Example Website or App

https://codesandbox.io/s/silent-darkness-q2wfs7

Steps to Reproduce the Bug or Issue

  1. create next app
  2. install next-ui
  3. add CssBaseline.flush() to _document.js

Expected behavior

Server rendered should match client

Screenshots or Videos

image

Operating System Version

macOS

Browser

Chrome

JayMGurav avatar Jul 07 '22 05:07 JayMGurav

Hi, @JayMGurav! I found a solution to your problem. Please, move {CssBaseline.flush()} from _document.js to _app.js. The result are as follows:

_app.js

import { NextUIProvider } from "@nextui-org/react";
import { CssBaseline } from "@nextui-org/react";

function MyApp({ Component, pageProps }) {
  return (
    // 2. Use at the root of your app
    <NextUIProvider>
      {CssBaseline.flush()}
      <Component {...pageProps} />
    </NextUIProvider>
  );
}

export default MyApp;

yudinikita avatar Jul 12 '22 18:07 yudinikita

Hi, @JayMGurav! I found a solution to your problem. Please, move {CssBaseline.flush()} from _document.js to _app.js. The result are as follows:

_app.js

import { NextUIProvider } from "@nextui-org/react";
import { CssBaseline } from "@nextui-org/react";

function MyApp({ Component, pageProps }) {
  return (
    // 2. Use at the root of your app
    <NextUIProvider>
      {CssBaseline.flush()}
      <Component {...pageProps} />
    </NextUIProvider>
  );
}

export default MyApp;

On my side it kills hot reload if I move it as you suggested, probably the issue comes from the update react 18.2 did with hydration.

Kublick avatar Jul 13 '22 06:07 Kublick

You may remove as="button" in the avatar. If not , you will get Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>., the reason of hydration failed

TIMMLOPK avatar Jul 23 '22 09:07 TIMMLOPK

Hi, @JayMGurav! I found a solution to your problem. Please, move {CssBaseline.flush()} from _document.js to _app.js. The result are as follows:

_app.js

import { NextUIProvider } from "@nextui-org/react";
import { CssBaseline } from "@nextui-org/react";

function MyApp({ Component, pageProps }) {
  return (
    // 2. Use at the root of your app
    <NextUIProvider>
      {CssBaseline.flush()}
      <Component {...pageProps} />
    </NextUIProvider>
  );
}

export default MyApp;

Tried this, does not work. I still get the hydration error.

VinitSarvade avatar Aug 30 '22 15:08 VinitSarvade

I do also get this with the navbar component in next js...

peteole avatar Sep 11 '22 17:09 peteole

You cannot have the avatar in the dropdown button since apperently the avatar contains a button itself. However once you remove it there is still the following error: https://codesandbox.io/s/ecstatic-rosalind-lqoyc7?file=/pages/index.js

Warning: Prop `id` did not match. Server: "react-aria-1" Client: "react-aria-3"
    at button
    at Styled.button
    at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/button/button.js:21:71)
    at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/popover/popover-trigger.js:10:177)
    at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/dropdown/dropdown-trigger.js:9:89)
    at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/dropdown/dropdown-button.js:13:89)
    at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/popover/popover.js:10:89)
    at m (webpack-internal:///./node_modules/@nextui-org/react/esm/dropdown/dropdown.js:10:28)
    at header
    at Styled.div
    at e (webpack-internal:///./node_modules/@nextui-org/react/esm/row/row.js:8:20)
    at div
    at Styled.div
    at n (webpack-internal:///./node_modules/@nextui-org/react/esm/container/container.js:7:14)
    at Layout (webpack-internal:///./pages/index.js:8:26)
    at div
    at $f57aed4a881a3485$var$OverlayContainerDOM (webpack-internal:///./node_modules/@react-aria/overlays/dist/module.js:747:55)
    at $f57aed4a881a3485$export$178405afcd8c5eb (webpack-internal:///./node_modules/@react-aria/overlays/dist/module.js:711:21)
    at $f57aed4a881a3485$export$bf688221f59024e5
    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/module.js:31:64)
    at __webpack_exports__.default.disableBaseline (webpack-internal:///./node_modules/@nextui-org/react/esm/theme/theme-provider.js:15:138)
    at MyApp (webpack-internal:///./pages/_app.js:10:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20740)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23199)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:149:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:651:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:773:27)

peteole avatar Sep 14 '22 17:09 peteole

@peteole I have the same issue with the hydration ID's not matching. Am also using the Avatar (with as="button") inside of a Dropdown.Trigger.

i.e.

<Navbar.Content>
<Dropdown placement="bottom-right">
  <Dropdown.Trigger>
    <Avatar
      bordered
      size="lg"
      squared
      zoomed={!!session?.user?.image}
      as="button"
      color="gradient"
      src={session?.user?.image ?? ''}
    />
  </Dropdown.Trigger>
...

See: https://github.com/ndom91/ndo.so/blob/main/src/components/nav.jsx#L46-L54

ndom91 avatar Sep 18 '22 16:09 ndom91

Hi @JayMGurav you can use custom trigger with Dropdown.Trigger, such as the example above or the documentation. For id hydration mismatch will be fixed in https://github.com/nextui-org/nextui/pull/781.

tianenpang avatar Sep 24 '22 18:09 tianenpang

hello, Good Morning, I am new to this development environment. I am trying to carry out this test, but this error appears. Please, I would appreciate your help and guidance.

Warning: Prop id did not match. Server: "react-aria-1" Client: "react-aria-3" at input at Styled.input at label at Styled.div at div at Styled.div at div at Styled.div at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/input/input.js:14:88) at div at Styled.div at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/container/container.js:8:83) at div at Styled.div at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/card/card.js:10:71) at div at Styled.div at e (webpack-internal:///./node_modules/@nextui-org/react/esm/col/col.js:8:20) at div at Styled.div at e (webpack-internal:///./node_modules/@nextui-org/react/esm/row/row.js:8:20) at div at Styled.div at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/container/container.js:8:83) at div at createMarket (webpack-internal:///./pages/mint.js:31:89) at div at $f57aed4a881a3485$var$OverlayContainerDOM (webpack-internal:///./node_modules/@react-aria/overlays/dist/module.js:745:55) at $f57aed4a881a3485$export$178405afcd8c5eb (webpack-internal:///./node_modules/@react-aria/overlays/dist/module.js:709:21) at $f57aed4a881a3485$export$bf688221f59024e5 at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/module.js:23:64) at webpack_exports.default.disableBaseline (webpack-internal:///./node_modules/@nextui-org/react/esm/theme/theme-provider.js:15:138) at MyApp (webpack-internal:///./pages/_app.js:40:11) at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11) at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:3325) at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:6707) at Container (webpack-internal:///./node_modules/next/dist/client/index.js:60:1) at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:173:11) at Root (webpack-internal:///./node_modules/next/dist/client/index.js:346:11)

fcocarrasquel avatar Dec 02 '22 14:12 fcocarrasquel

I just started trying NextUI,

when use some component like Radio or Input,

I get a lot of Warning like

Warning: Prop id did not match. Server: "react-aria-4" Client. "react-aria-12"

Does anyone know how to fix it?

dawangraoming avatar Mar 24 '23 13:03 dawangraoming

Hi, @JayMGurav! I found a solution to your problem. Please, move {CssBaseline.flush()} from _document.js to _app.js. The result are as follows:

_app.js

import { NextUIProvider } from "@nextui-org/react";
import { CssBaseline } from "@nextui-org/react";

function MyApp({ Component, pageProps }) {
  return (
    // 2. Use at the root of your app
    <NextUIProvider>
      {CssBaseline.flush()}
      <Component {...pageProps} />
    </NextUIProvider>
  );
}

export default MyApp;

I tried, but does not work. I get dangerouslySetInnerHTML error.

Warning: Prop `dangerouslySetInnerHTML` did not match. Server: "--sxs{--sxs:0 nextui-t-bzCiFt}@media{:root,.nextui-t-
bzCiFt{--nextui-fonts-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI','Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira 
Sans', 'Droid Sans','Helvetica Neue', sans-serif;;--nextui-fonts-mono:Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 
'DejaVu Sans Mono', 'Bitstream Vera Sans Mono','Courier New', monospace;;--nextui-fontSizes-xs:0.75rem;--nextui-
fontSizes-sm:0.875rem;--nextui-fontSizes-base:1rem;--nextui-fontSizes-md:1rem;--nextui-fontSizes-lg:1.125rem;--
nextui-fontSizes-xl:1.25rem;--nextui-fontSizes-2xl:1.5rem;--nextui-fontSizes-3xl:1.875rem;--nextui-fontSizes-
4xl:2.25rem;--nextui-fontSizes-5xl:3rem;--nextui-fontSizes-6xl:3.75rem;--nextui-fontSizes-7xl:4.5rem;--nextui-
fontSizes-8xl:6rem;--nextui-fontSizes-9xl:8rem;--nextui-fontWeights-hairline:100;--nextui-fontWeights-thin:200;--
nextui-fontWeights-light:300;--nextui-fontWeights-normal:400;--nextui-fontWeights-medium:500;--nextui-fontWeights-
semibold:600;--nextui-fontWeights-bold:700;--nextui-fontWeights-extrabold:800;--nextui-fontWeights-black:900;--
nextui-lineHeights-xs:1;--nextui-lineHeights-sm:1.25;--nextui-lineHeights-base:1.5;--nextui-lineHeights-md:1.5;--nextui-
lineHeights-lg:1.75;--nextui-lineHeights-xl:1.75;--nextui-lineHeights-2xl:2;--nextui-lineHeights-3xl:2.25;--nextui-
lineHeights-4xl:2.5;--nextui-lineHeights-5xl:1;--nextui-lineHeights-6xl:1;--nextui-lineHeights-7xl:1;--nextui-lineHeights-
8xl:1;--nextui-lineHeights-9xl:1;--nextui-letterSpacings-tighter:-0.05em;--nextui-letterSpacings-tight:-0.025em;--nextui-
letterSpacings-normal:0;--nextui-letterSpacings-wide:0.025em;--nextui-letterSpacings-wider:0.05em;--nextui-
letterSpacings-widest:0.1em;--nextui-space-0:0rem;--nextui-space-1:0.125rem;--nextui-space-2:0.25rem;--nextui-
space-3:0.375rem;--nextui-space-4:0.5rem;--nextui-space-5:0.625rem;--nextui-space-6:0.75rem;--nextui-space-
7:0.875rem;--nextui-space-8:1rem;--nextui-space-9:1.25rem;--nextui-space-10:1.5rem;--nextui-space-11:1.75rem;--
nextui-space-12:2rem;--nextui-space-13:2.25rem;--nextui-space-14:2.5rem;--nextui-space-15:2.75rem;--nextui-space-
16:3rem;--nextui-space-17:3.5rem;--nextui-space-18:4rem;--nextui-space-20:5rem;--nextui-space-24:6rem;--nextui-
space-28:7rem;--nextui-space-32:8rem;--nextui-space-36:9rem;--nextui-space-40:10rem;--nextui-space-44:11rem;--
nextui-space-48:12rem;--nextui-space-52:13rem;--nextui-space-56:14rem;--nextui-space-60:15rem;--nextui-space-
64:16rem;--nextui-space-72:18rem;--nextui-space-80:20rem;--nextui-space-96:24rem;--nextui-space-xs:0.5rem;--
nextui-space-sm:0.75rem;--nextui-space-md:1rem;--nextui-space-lg:1.25rem;--nextui-space-xl:2.25rem;--nextui-space-
2xl:3rem;--nextui-space-3xl:5rem;--nextui-space-4xl:10rem;--nextui-space-5xl:14rem;--nextui-space-6xl:18rem;--
nextui-space-7xl:24rem;--nextui-space-8xl:32rem;--nextui-space-9xl:40rem;--nextui-space-min:min-content;--nextui-
space-max:max-content;--nextui-space-fit:fit-content;--nextui-space-screen:100vw;--nextui-space-full:100%;--nextui-
space-px:1px;--nextui-radii-xs:7px;--nextui-radii-sm:9px;--nextui-radii-md:12px;--nextui-radii-base:14px;--nextui-radii-
lg:14px;--nextui-radii-xl:18px;--nextui-radii-2xl:24px;--nextui-radii-3xl:32px;--nextui-radii-squared:33%;--nextui-radii-
rounded:50%;--nextui-radii-pill:9999px;--nextui-zIndices-1:100;--nextui-zIndices-2:200;--nextui-zIndices-3:300;--
nextui-zIndices-4:400;--nextui-zIndices-5:500;--nextui-zIndices-10:1000;--nextui-zIndices-max:9999;--nextui-
borderWeights-light:1px;--nextui-borderWeights-normal:2px;--nextui-borderWeights-bold:3px;--nextui-borderWeights-
extrabold:4px;--nextui-borderWeights-black:5px;--nextui-transitions-default:all 250ms ease;--nextui-transitions-
button:background 0.25s ease 0s, color 0.25s ease 0s, border-color 0.25s ease 0s, box-shadow 0.25s ease 0s, transform 
0.25s ease 0s, opacity 0.25s ease 0s;--nextui-transitions-avatar:box-shadow 0.25s ease 0s, opacity 0.25s ease 0s;--
nextui-transitions-card:transform 0.25s ease 0s, filter 0.25s ease 0s, box-shadow 0.25s ease 0s;--nextui-transitions-
dropdownItem:background 0.12s ease, transform 0.12s ease, color 0.12s ease, box-shadow 0.12s ease 0s;--nextui-
breakpoints-xs:650px;--nextui-breakpoints-sm:960px;--nextui-breakpoints-md:1280px;--nextui-breakpoints-lg:1400px;-
-nextui-breakpoints-xl:1920px;--nextui-colors-white:#ffffff;--nextui-colors-black:#000000;--nextui-colors-
primaryLight:var(--nextui-colors-blue200);--nextui-colors-primaryLightHover:var(--nextui-colors-blue300);--nextui-
colors-primaryLightActive:var(--nextui-colors-blue400);--nextui-colors-primaryLightContrast:var(--nextui-colors-
blue600);--nextui-colors-primary:var(--nextui-colors-blue600);--nextui-colors-primaryBorder:var(--nextui-colors-
blue500);--nextui-colors-primaryBorderHover:var(--nextui-colors-blue600);--nextui-colors-primarySolidHover:var(--
nextui-colors-blue700);--nextui-colors-primarySolidContrast:var(--nextui-colors-white);--nextui-colors-
primaryShadow:var(--ne

k1e1n04 avatar May 25 '23 16:05 k1e1n04

Hey guys sorry for the delay please upgrade to V2.

jrgarciadev avatar Aug 02 '23 14:08 jrgarciadev