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.

I did a work around by changing reactStrictMode to false but now I am getting this error. Warning: Prop `style` did not match. Server: "pointer-events:none" Client: "visibility:;height:;pointer-events:none" — Shawn, Dec 08 '22 at 22:05

score 0 · Answer 1 · answered Apr 14 '23 at 23:05

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

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

1 Answers1