nextui: [BUG] - You must wrap your application in an & Prop 'data-key' did not match

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>
    )
  )
}

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

import { useSSR } from ‘@nextui-org/react’

const { isBrowser } = useSSR()

isBrowser && ( <Component /> )

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

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

import { useSSR } from ‘@nextui-org/react’

const { isBrowser } = useSSR()

isBrowser && ( )

To the people above, this worked perfectly.

this disables server-side rendering

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.

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.

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 🪩

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 😅

"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.

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 …

Where do I put this code?

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.

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

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

How to use NextUIProvider in layout.tsx with SSR?