Can't get MDX working with Next JS 14.2.22 app router

[ynamite]

I followed the example here and got Next Intl up and running quite nicely.

Today I wanted to install MDX and followed the guide in the Next JS docs as well as the Next Intl docs, but I can only get it working for the home page. The reason, it seems, is that only the home page can be an async component, not so the localized routes. I keep getting the following error when attempting to import a localized mdx file in src/app/[locale]/kudos/page.tsx

 ⨯ Internal error: Error: Expected a suspended thenable. This is a bug in React. Please file an issue.

My code for src/app/[locale]/kudos/page.tsx is as follows

import { getMetadata } from '@/utils/getMetadata';
import { setRequestLocale } from 'next-intl/server';
import { useTranslations } from 'next-intl';
import { PageProps, Metadata } from '@/types';

const namespace = 'kudos';

export async function generateMetadata({
    params: { locale },
}: PageProps): Promise<Metadata> {
    return getMetadata(namespace, locale);
}
export default async function KudosPage(({ params: { locale } }: PageProps) {
    setRequestLocale(locale);

    const t = useTranslations(namespace);

  try {
    const Content = (await import(`./${locale}.mdx`)).default;
    return <Content />;
  } catch (error) {
    console.error(error);
  }
}

When I remove the async keyword and the dynamic import in the try/catch everything works. As soon as I put back the async keyword, I again get the internal error. Are default async page components supposed to work?

I must be doing something wrong, but I have no idea what.

[ynamite]

Ah, after trying different things for several hours, right after posting the question I believe I've figured it out ...

[amannn]

Looking at your code sample, the issue seems to be that you're calling the hook useTranslations in an async component. Hooks are generally not supported in async components. You can resolve this, by switching to await getTranslations.

The latest version of eslint-plugin-react-hooks also includes a check to avoid this error.

[ynamite]

Exactly, I was going to post an answer today with the solution. Thanks!