Unable to use with RSC when mode is async

[ScreamZ]

Description

Note

This post has been updated, please see answers in post below for changes, this is only kept for history.

Hi,

For various reason, i need my RSC to be asynchronous (data fetching). Maybe I've missed something

❌ Not working

import { useTranslations } from "next-intl";

export default async function Home() {
  const t = useTranslations("Index");
  return <h1>{t("title")}</h1>;
}

---

✅ Working

import { useTranslations } from "next-intl";

export default function Home() {
  const t = useTranslations("Index");
  return <h1>{t("title")}</h1>;
}

By just removing async keyword the following error message disappear and 500 HTTP is not present

GET /en 500 in 503ms
 ⨯ Error: failed to pipe response
}

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://github.com/ScreamZ/repro-temp

Reproduction description

pnpm install or whatever

just run app and go on first page

Expected behaviour

No crash or something to work around ? I might have missed something in the doc ? :'(

[ScreamZ]

After searching more i got this : #733
And this : https://next-intl-docs.vercel.app/docs/environments/server-client-components#async-components

I guess this section of the documentation should be highlighted in the https://next-intl-docs.vercel.app/docs/getting-started/app-router part along with a warning or callout i don't know. The error is not very explicit and therefore this can help a lot!

Therefore if I'm using server SDK, would my labels change if i change the locale in the runtime ? As I'm not using useTranslations ?

[amannn]

The next version of the React ESLint plugin should contain a warning for this: [ESLint] Disallow hooks in async functions. That should hopefully help to spot this a bit easier.

I'm having a look at the getting started docs in #1017, I made a note there to potentially mention async components. Thanks for the feedback!

[ScreamZ]

Wonderful! Sorry @amannn if i mess some parts, but this new way of thinking about react with servers, hybrid and clients. Now with server action above all of this, this get really tricky for the next weeks ahah

Keep the good job going,

thanks