React Aria in Next.js error: Prop `id` did not match

Question

I am testing out React Aria in Next.js and I keep getting this error. Warning: Prop id did not match. Server: "react-aria-3" Client: "react-aria-10"

Wrapping _app.js with the SSRProvider component does not resolve this issue

  export default function App({ Component, pageProps }: AppProps) {

  return (
    <SSRProvider>
      <Component {...pageProps} />
    </SSRProvider>
  );
}

I am using Next.js 13. Not sure how to fix this issue.

Answer 1

You have to wrap your entire application in the SSRProvider Reference: https://react-spectrum.adobe.com/react-aria/ssr.html

// root AriaSSRProvider.tsx

"use client";

import { ReactNode } from "react";
import { SSRProvider } from "react-aria";

export default function AriaSSRProvider(props: { children: ReactNode }) {
  const { children } = props;
  return <SSRProvider>{children}</SSRProvider>;
}

// root layout.tsx

import { ReactNode } from "react";
import AriaSSRProvider from "./AriaSSRProvider";

export default function AdminLayout(props: { children: ReactNode }) {
  const { children } = props;
  return (
    <AriaSSRProvider>
      {children}
    </AriaSSRProvider>
  );
}