Unable to Use loading.tsx with next-intl in App Router with i18n Routing

lukas60055 commented 3 months ago

Description

I am struggling to get the loading.tsx file to work correctly with next-intl when using the App Router with i18n routing in a Next.js project. I have tried several approaches, including placing loading.tsx in both app/loading.tsx and app/[locale]/loading.tsx directories. However, neither seems to trigger the loading component, and I keep encountering errors instead.

Has anyone successfully implemented this, or does anyone have suggestions on how to properly integrate loading.tsx in this setup?

Verifications

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

Mandatory reproduction URL

https://github.com/lukas60055/next-intl-bug-repro-app-router/

Reproduction description

To observe the issue, you can follow these steps:

Implement next-intl: Set up next-intl according to the documentation, ensuring that internationalization works correctly across different pages.
Create loading.tsx: Add a loading.tsx file within the app/loading.tsx directory. Additionally, try placing the loading.tsx in the app/[locale]/loading.tsx directory.
Test the Loading State: Navigate between pages or perform any action that would typically trigger the loading state in Next.js.

You'll observe that the loading.tsx component is not triggered, and instead, errors related to missing or improperly configured components may appear.

Expected behaviour

I expected the loading.tsx component to be triggered whenever the app is in a loading state, specifically when navigating between pages or loading content in a locale-specific route. The loading component should render correctly without any errors, providing a seamless user experience during transitions.

github-actions[bot] commented 3 months ago

Thank you for your report!

Unfortunately, the reproduction is missing or incomplete, and as such we cannot investigate this issue. Please add a reproduction to the issue, otherwise it will be closed automatically.

Templates:

Creating a good bug report takes time.

To help us resolve the issue quickly, please simplify the reproduction as much as possible by removing any unnecessary code, files, and dependencies that are not directly related to the problem. The easier it is for us to see the issue, the faster we can help you.

Apart from the reproduction, make sure to include the precise steps on how to reproduce the issue, e.g.:

Open reproduction
Click on …
See error: …

Thank you for your understanding!

FAQ

**"I've included a reproduction, what is missing?"** This comment might have been added because your reproduction doesn't point to a destination where the issue can be reproduced. Please make sure that the latest changes were saved in the reproduction and that the link is correct.

lukas60055 commented 2 months ago

@amannn I added reproduction. https://github.com/lukas60055/next-intl-bug-repro-app-router/

Unsleeping commented 2 months ago

@lukas60055 try this one as workaround:

src/app/[locale]/page.tsx

import { getTranslations } from "next-intl/server";

export default async function IndexPage() {
  const t = await getTranslations("IndexPage");
  const s = await new Promise((resolve) => setTimeout(resolve, 3000)); // Simulate asynchronous loading
  return <h1>{t("title")}</h1>;
}

you need to trigger suspense boundary to show loading.tsx, i achieved this by simulating async loading in RSC, also change useTranslation to direct async version in RSC (getTranslations)

@amannn when i tried this one, useTranslations should return me the RSC version, but i see the error)

import { useTranslations } from "next-intl";

export default async function IndexPage() {
  const t = useTranslations("IndexPage");
  const s = await new Promise((resolve) => setTimeout(resolve, 3000)); // Simulate asynchronous loading
  return <h1>{t("title")}</h1>;
}

error:

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

amannn commented 2 months ago

@Unsleeping is right, your page doesn't need to trigger a loading state, therefore it's never shown.

` Expected a suspended thenable. This is a bug in React. Please file an issue.``

This has been discussed a few times already: https://github.com/amannn/next-intl/issues?q=is%3Aissue+suspended+thenable+is%3Aclosed. The React ESLint plugin should surface this error better in the future (see https://github.com/amannn/next-intl/issues/1023#issuecomment-2079425415).

I'm going to close this issue as this seems to be resolved.

amannn / next-intl