I'm trying to integrate React Aria into my Next.js project, but I'm having trouble determining whether the React Aria providers should be used as client or server components. I'm using the app directory architecture (https://beta.nextjs.org/docs), and I'm not sure if React Aria is compatible with it.
I've read the React Aria documentation on server-side rendering (https://react-spectrum.adobe.com/react-aria/ssr.html), which recommends setting up both the SSRProvider and the I18nProvider. However, I've tried different setups and haven't been successful:
'use server',SSRProvider with 'use server' and I18nProvider with 'use client',SSRProvider with 'use client' and I18nProvider with 'use server','use client'.With the first two setups, I get the error message You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with 'use client', so they're Server Components by default.". With the two other setups, I get the error message Module not found: Can't resolve '@swc/helpers/src/_class_private_field_init.mjs'.
I suspect the second error (the module not found one) is because the SSRProvider should be a server component, but when I switch it to a client component, I get the first error.
If I haven't provided enough information, please let me know and I'll do my best to provide it 😉.
Any help or guidance in figuring out the correct setup for React Aria in a Next.js project using the app directory architecture would be greatly appreciated. Thank you in advance for your responses!
I've updated to Next.js 13.3.4, this resolved the issue in my case.