[BUG] - You must wrap your application in an <SSRProvider> & Prop 'data-key' did not match

[Kaamyab]

Describe the bug

The NextUI.Table Dynamic Table Throws an Error on Terminal (NextJS) :

When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.

And also a warning on Chrome DevTools :

Warning: Prop 'data-key' did not match. Server: "row-header-column-ilm253m8gg" Client: "row-header-column-57c34tinu8f"

Your Example Website or App

https://codesandbox.io/s/frosty-christian-nwei79

Steps to Reproduce the Bug or Issue

1. Go to https://nextui.org/docs/components/table#custom-cells
2. Try to use it with NextJS

Expected behavior

I Expect No Warnings

Screenshots or Videos

Operating System Version

Windows

Browser

Chrome

[iamalvisng]

I got the same issue too.

[jaaymes]

import { useSSR } from '@nextui-org/react'

const { isBrowser } = useSSR()

isBrowser && (

)

[jrgarciadev]

Hey guys, that's because you didn't wrap your application in the "NextUIProvider", please follow the installation steps: https://nextui.org/docs/guide/getting-started#next.js

[spencerchang]

I have no idea about this even though i followed jrgarciadev said that wrap my application in the "NextUIProvider" and follow the installation steps.

But i still having Warning: Prop data-key did not match. Server: "row-header-column-eaat0e6j285" Client: "row-header-column-vk0zw265nm"

And i didn't have warning on Terminal (NextJS)

[tianenpang]

In some cases, there may be an id or data-key mismatch error, even if wrapped the app in the NextUIProvider, since react-aria does not yet support React Strict Mode, but that doesn't mean you don't need NextUIProvider.

Under the hood, the row-header-column keys are generated by Math.random, the reason why it causes a mismatch between server and client.

In my opinion, ignore the mismatch errors temporarily and wait for future updates to support it, or just render the component on the client-side, disabling the strict mode can be a way, but I don't recommend it. How to disable the strict mode in Next.js?

Refer to https://github.com/adobe/react-spectrum/issues/2231#issuecomment-1087805956.

[ekendra-nz]

I'm getting this error too even though I've wrapped my app properly:

      <NextUIProvider>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </NextUIProvider>

[alexH56]

@jrgarciadev, I'm seeing the same issue as @ekendra-nz: my app is correctly wrapped in the NextUIProvider, yet I'm still seeing the error.

[MeloHenrique]

Same issue here. Any updates?

[Noah-Haf]

Next.js 13 Next.js 13 introduces a new app/ directory folder structure. By default it uses React Server Components. To use NextUI in those components, you need to convert them into client-side component by adding a 'use client'; at the top of your file. NextUI only works in client-side components.

[MeloHenrique]

I am using Next.js 13 however I am not using the new app/ directory folder structure.

[ekendra-nz]

same. i don't use server-side rendering or the new 'app' dir architecture. still getting this error message in the console

On Mon, 13 Feb 2023 at 10:53, Henrique Melo @.***> wrote:

I am using Next.js 13 however I am not using the new app/ directory folder structure.

— Reply to this email directly, view it on GitHub https://github.com/nextui-org/nextui/issues/779#issuecomment-1427141623, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD4GY7RD5WBCQM5XVMSQXCDWXFLT3ANCNFSM6AAAAAAQR4M4GU . You are receiving this because you were mentioned.Message ID: @.***>

[Noah-Haf]

Are you using client components?

[ekendra-nz]

i may need to break down endpoints and separate out everything to more clearly define client side / server side

On Mon, 13 Feb 2023 at 11:12, Cookie @.***> wrote:

Are you using client components?

— Reply to this email directly, view it on GitHub https://github.com/nextui-org/nextui/issues/779#issuecomment-1427145822, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD4GY7X45OLT2UCKKSBF3B3WXFN27ANCNFSM6AAAAAAQR4M4GU . You are receiving this because you were mentioned.Message ID: @.***>

[MeloHenrique]

I only have a blank page with the Navbar component from NextUI. Running without the component there's no error, but running with the component there's an error. I made the test without anything inside the Navbar.

[ImLunaHey]

import { useSSR } from '@nextui-org/react'

const { isBrowser } = useSSR()

isBrowser && ( )

To the people above, this worked perfectly.

[Noah-Haf]

Where do I put this code?

[MeloHenrique]

import { useSSR } from '@nextui-org/react' const { isBrowser } = useSSR() isBrowser && ( )

To the people above, this worked perfectly.

That worked, thanks!

[jcenlo]

Add in _app.tsx

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import { NextUIProvider } from '@nextui-org/react';
import { darkTheme } from '@/themes';
import { useSSR } from '@nextui-org/react'

export default function App({ Component, pageProps }: AppProps) {
  const { isBrowser } = useSSR()
  return(
    isBrowser && (
      <NextUIProvider theme={darkTheme}>
        <Component {...pageProps} />
      </NextUIProvider>
    )
  )
}

[Noah-Haf]

Worked!

[bjorn06]

I am using Next.js 13 and the new app/directory folder structure and i have this same issue, even after "use client". In my case, there is no _app.tsx to wrap the provider to ...

[mrjomp]

I think this issue should be reopened as no real fix was created for handling it

[MeloHenrique]

I am not sure but NextUI only works with client side rendering. Is it possible that one or more components of the page is rendering server-side? (Not sure if it’s possible)

[Ishan-sa]

import { useSSR } from '@nextui-org/react' const { isBrowser } = useSSR() isBrowser && ( )

To the people above, this worked perfectly.

perfect, thank you so much!

[depyronick]

this disables server-side rendering

[st4ng]

Seems to be a dependency issue. NextUI has @react-aria/ssr locked to 3.3.0 but some of the other @react-aria packages depend on ^3.4.1. Therefore multiple versions are installed.

I fixed it by adding the following to my package.json:

"resolutions": {
    "@react-aria/ssr": "^3.4.1"
 }

---

Edit: To get rid of client side warning you also have to add "@react-aria/table": "^3.5.0". Maybe it's best to update all aria dependencies, but not sure if there are any side effects :sweat_smile:

"resolutions": {
    "@react-aria/button": "^3.6.2",
    "@react-aria/checkbox": "^3.6.0",
    "@react-aria/dialog": "^3.4.0",
    "@react-aria/focus": "^3.7.0",
    "@react-aria/i18n": "^3.6.1",
    "@react-aria/interactions": "^3.12.0",
    "@react-aria/label": "^3.4.2",
    "@react-aria/link": "^3.3.4",
    "@react-aria/menu": "^3.6.2",
    "@react-aria/overlays": "^3.11.0",
    "@react-aria/radio": "^3.4.0",
    "@react-aria/ssr": "^3.3.0",
    "@react-aria/table": "^3.5.0",
    "@react-aria/visually-hidden": "^3.5.0"
}

Edit 2: Doing this for @react-aria/utils gives me a build error though.

[b-bot]

Add in _app.tsx

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import { NextUIProvider } from '@nextui-org/react';
import { darkTheme } from '@/themes';
import { useSSR } from '@nextui-org/react'

export default function App({ Component, pageProps }: AppProps) {
  const { isBrowser } = useSSR()
  return(
    isBrowser && (
      <NextUIProvider theme={darkTheme}>
        <Component {...pageProps} />
      </NextUIProvider>
    )
  )
}

This will disable SSR.

You should use this conditional isBrowser only on the offending component. Comment out segments and drill down to where it is.

This is a workaround until we get v2 🪩

[ashbuilds]

How to use NextUIProvider in layout.tsx with SSR?

[peterhijma]

Add in _app.tsx

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import { NextUIProvider } from '@nextui-org/react';
import { darkTheme } from '@/themes';
import { useSSR } from '@nextui-org/react'

export default function App({ Component, pageProps }: AppProps) {
  const { isBrowser } = useSSR()
  return(
    isBrowser && (
      <NextUIProvider theme={darkTheme}>
        <Component {...pageProps} />
      </NextUIProvider>
    )
  )
}

This will disable SSR.

You should use this conditional isBrowser only on the offending component. Comment out segments and drill down to where it is.

This is a workaround until we get v2 🪩

I use v2, but still got this error using https://nextui.org/docs/components/table#custom-styles. (using Remix)

Problem disappears if I remove selectionMode="multiple" from the table.

[stasnocap]

I use v2, but still got this error using https://nextui.org/docs/components/table#custom-styles. (using Remix)

Problem disappears if I remove selectionMode="multiple" from the table.

Same! But with nextjs

[ftsmasaki]

I have same issue, but I can't use the way that wrap with useSSR() on v2. How can I solve this problem?

[seb350]

This happens because there's a mismatch between the server-rendered content and the client-side rendered content, specifically the data-key.

Since NextUI needs "use client" anyway, both your custom Table compoenent and the NextThemesProvider component can be imported using next/dynamic and disable SSR completely.

This: import TableX from './components/Table'; import { ThemeProvider as NextThemesProvider } from "next-themes";

To this: const TableX = dynamic( () => import('./components/Table'), { ssr: false } ); const NextThemesProvider = dynamic( () => import('next-themes').then((mod) => mod.ThemeProvider), { ssr: false } );

Then use as imported normally.

[ebokoo]

This happens because there's a mismatch between the server-rendered content and the client-side rendered content, specifically the data-key.

Since NextUI needs "use client" anyway, both your custom Table compoenent and the NextThemesProvider component can be imported using next/dynamic and disable SSR completely.

This: import TableX from './components/Table'; import { ThemeProvider as NextThemesProvider } from "next-themes";

To this: const TableX = dynamic( () => import('./components/Table'), { ssr: false } ); const NextThemesProvider = dynamic( () => import('next-themes').then((mod) => mod.ThemeProvider), { ssr: false } );

Then use as imported normally.

worked thanks

[Cainier]

solution

https://github.com/nextui-org/nextui/issues/1729#issuecomment-2115392407