[React-aria] — Compatibility with Next.js 13 app directory ? #4471

remib18 · 2023-05-03T13:01:43Z

remib18
May 3, 2023

Hello there 👋🏻

I was trying to set up React-aria in a Next.js 13 app with the app directory architecture. However, I discovered that the SSRProvider does not seem to work in this architecture because it calls a client component as a server. Therefore, I attempted to set it up in a client component, but now I am receiving an error that it cannot import a helper.

I am not sure if I am misunderstanding how to set it up or if it is not compatible at the moment. If you are interested, I have provided detailed errors in this Stack Overflow question: https://stackoverflow.com/questions/76148697/react-aria-with-next-js-issues-with-ssrprovider-setup

Thank you in advance!

Answered by remib18

May 4, 2023

I've updated to nextJS 13.3.4, it seems to resolve the issue.

View full answer

LFDanLu · 2023-05-03T16:31:58Z

LFDanLu
May 3, 2023
Collaborator

What version of NextJS are you using? The mjs error you see with your latter two setups maybe a nextjs issue alluded to here where 13.2 works but 13.3 doesn't.

1 reply

remib18 May 4, 2023
Author

I've updated to nextJS 13.3.4, it seems to resolve the issue.

Answer selected by remib18

kod-man · 2023-06-12T20:28:04Z

kod-man
Jun 12, 2023

Hey I have a question. I am using Internationalization (i18n) in Server Components. My layout component is like this

import LanguageSwitcher from '@/components/common/LanguageSwitcher';
import { Inter } from 'next/font/google';
import { notFound } from 'next/navigation';

import React from 'react';
import { I18nProvider, SSRProvider, useLocale } from 'react-aria';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const { locale, direction } = useLocale();

  // Show a 404 error if the user requests an unknown locale
  if (params.locale !== locale) {
    notFound();
  }
  return (
    <SSRProvider>
      <I18nProvider locale={locale}>
        <html lang={locale} dir={direction}>
          <body className={inter.className}>
            <h1>Merhaba</h1>
            <LanguageSwitcher />
            {children}
          </body>
        </html>
      </I18nProvider>
    </SSRProvider>
  );
}

But I am getting an error. Am I doing something wrong? Version "next": "13.4.4",

2 replies

devongovett Jun 13, 2023
Maintainer

You need "use client" in there.

kod-man Jun 13, 2023

I added it but had to remove metadata first, then I got an error about notFound package. Since it is required for server-side-translation. I guess both don't work together

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[React-aria] — Compatibility with Next.js 13 app directory ? #4471

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

[React-aria] — Compatibility with Next.js 13 app directory ? #4471

Uh oh!

remib18 May 3, 2023

Replies: 2 comments · 3 replies

Uh oh!

LFDanLu May 3, 2023 Collaborator

Uh oh!

remib18 May 4, 2023 Author

Uh oh!

kod-man Jun 12, 2023

Uh oh!

devongovett Jun 13, 2023 Maintainer

Uh oh!

kod-man Jun 13, 2023

remib18
May 3, 2023

Replies: 2 comments 3 replies

LFDanLu
May 3, 2023
Collaborator

remib18 May 4, 2023
Author

kod-man
Jun 12, 2023

devongovett Jun 13, 2023
Maintainer