Using `notFound` in suspended interleaved server component breaks rendering if not-found page (or layout) renders a `next/link` - production-only - Minified React error #310

[michaelschufi]

trafficstars

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/elastic-sound-fpmpdt

To Reproduce

1. Build and run the project with pnpm build && pnpm start if it's not already running.
2. Open https://fpmpdt-3000.csb.app/en
3. If no client-side exception shows up, hard-refresh until it does.
4. Observe the Minified React error #310 (Rendered more hooks than during the previous render.) being logged in the browser's console.

Note: The project has to be built. In dev-mode, no error occurs. It's also not always the case.

Current vs. Expected behavior

I expect the not-found page inside /[locale] to be rendered without issue. However, the page rendering results in a React error.

Provide environment information

Original

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.2.0-canary.26 // Latest available version is detected (14.2.0-canary.26).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Also tested with

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Thu Jan 11 04:09:03 UTC 2024
  Available memory (MB): 15853
  Available CPU cores: 16
Binaries:
  Node: 18.20.1
  npm: 10.5.0
  Yarn: 1.22.22
  pnpm: 8.15.5
Relevant Packages:
  next: 14.3.0-canary.73 // Latest available version is detected (14.3.0-canary.73).
  eslint-config-next: N/A
  react: 19.0.0-beta-04b058868c-20240508
  react-dom: 19.0.0-beta-04b058868c-20240508
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router, Routing (next/router, next/navigation, next/link)

Which stage(s) are affected? (Select all that apply)

next start (local), Vercel (Deployed)

Additional context

First of all, the crash won't happen 100% of the time, and only in production mode. This took a while to debug 😅

The stars need to align The crash stops happening, or happens less often, if one of the following is the case:

• The [locale]/not-found.tsx page does not include a next/link <Link>.
• The <Suspense> is removed.
• The useRouter and its useEffect is commented out.
• The data fetching in the server component is taking longer. E.g. 500ms instead of the 50ms configured. This points to a race condition.

Race condition Because of the race-conditiony nature of the bug, it could not be reproducible on some machines.

next/link links in general? It seems that any next/link link that will be rendered together with the not found page (e.g. those in the layout) triggers the bug. In a bigger project (where the issue first appeared), turning all the <Link> tags into <a> tags got rid of the issue.

[andremendonca]

I'm getting the same issue when the page has a loading.tsx (which adds a <Suspend> in the background).

[slackerzz]

Like @andremendonca, I use page streaming and I get this random error when I call notFound()

Disabling streaming (deleting loading.tsx file) fixes the issue

[andremendonca]

Like @andremendonca, I use page streaming and I get this random error when I call notFound()

Disabling streaming (deleting loading.tsx file) fixes the issue

Exactly what I had to do to "fix" the issue.

[michaelschufi]

Yes, but that's the point. The suspend boundary is needed for our case (better UX).

[slackerzz]

Yes, but that's the point. The suspend boundary is needed for our case (better UX).

It's a workaround of course. Having no errors is clearly a UX improvement 😅

[michaelschufi]

It's not a workaround. You won't get similar behaviour at all.

Not using a feature doesn't work around a bug of said feature. Imagine you open an issue because SCSS doesn't work with a framework. "Just don't use SCSS." is not a workaround. Maybe "compile SCSS in a build-step instead of on-demand" could be.

Anyway, I'd like to keep on-topic and find a way to fix the issue - with something different from "just don't use the feature".

[SaveliiLukash]

Facing a similar issue using [email protected]. We have a page.tsx with not-found.tsx and loading.tsx files.

Once the page.tsx calls the notFound() function the not-found.tsx component is displayed with either Minified React error #419 (the app remains alive) or Minified React error #310 (which crashes the app).

Happens in production only, not reproducible in development.

As noted here by kind people removing loading.tsx instantly fixed all Minified React errors. This, at least, keeps our app stable, but, of course worsens the UX by not providing instant navigation with a loading state.

[michaelschufi]

@SaveliiLukash What happens if you remove all next/link usages? Does it work then?

[josh-feldman]

I'm having the same issue using [email protected], but we are not using a not-found page or next/link on the layout. We have a next/link on the loading.tsx page, and then we are using a redirect, NOT a notFound and getting the same issue

[Zakariaels]

Hello,

Is there any news about this bug ?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[FengeRVictor]

Same issue for me, when I'm removing the loading.tsx, it works well. On my page, I have a redirect to a page that is using a loading.tsx

Does not work for nextjs 14.1.4 and 14.2.4

[websaid]

Having the same issue. Please fix if possible.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[zjnka141]

Same issue for me. But I'm not using the loading.tsx file, I use <Suspend> with a skeleton loader to wrap the page. When I remove the Suspend, it works well. Happens on Nextjs 14.2.3.

[yarikpetrenko]

+1

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[tristan-ieee]

Same issue here, removing the loading.tsx file seems to fix the issue. This is a UX issue for us- will this be addressed in an upcoming release?

[secure12]

We are facing the same issue as well. https://stackoverflow.com/questions/78945085/next-js-rendered-more-hooks-than-during-the-previous-render-when-notfound-is-use

In our example, there is a provider in which there is an effect which calls a server action. In the provider, there is a React Suspense wrapping an async component, which can call notFound.

[paigekim29]

Having the same issue with v14.2.1, where Error: Minified React error #310 occurs. It does not crash the app nor does Sentry captures it as an error, but it just redirects to the page as stated.

[ext0]

Running into this error as well on Next 14.2.13 - removing the loading.tsx on the sub-page doesn't seem to work.

[JKostov]

We have this problem because we are using the next-intl package. Versions of the packages are:"next": "14.2.3" and "next-intl": "^3.15.2".

We had to create layout.tsx outside [lang] and here we also put the loading.tsx. That way it works.

❌ Just to be clear with this folder structure it doesn't work:

└── app
    └── [lang]
          ├── layout.tsx
          ├── loading.tsx
          ├── not-found.tsx
          ├── error.tsx
          └── page.tsx

✅ With this it works:

└── app
    ├─── loading.tsx
    ├─── layout.tsx
    ├─── global-error.tsx
    └──[lang]
        ├── layout.tsx
        ├── not-found.tsx
        ├── error.tsx
        └── page.tsx

Still the loader is not present on every page, which is a problem for us too.

[Stefan94V]

It took a day of my life, but disabling loading.tsx solved this weard behaviour..

[AyronK]

This is still an issue in Next 15.1.6. Using loading.tsx and redirect in page.tsx

[cpotey]

Just to chime in, also am seeing this in "next": "14.2.25".

Such an odd one. Will have to remove the loading.tsx files for now, until a better solution appears.

[klonwar]

Same for me, was very surprised that such basic functionality cannot work together. And very upset when I found out about it in production, because this problem is not reproduced on the dev build. I'd appreciate at least some clue in the documentation that this all together won't work. Since according to the documentation these are (next/link, notFound() and loading.tsx) all recommended things that you wouldn't expect such problems with them.

As for me, it reproducing more consistently when hovering over links while the page is loading.

[ztanner]

Hi all -- we believe this is a React bug, which we've filed a minimal repro for here, and we'll keep an eye on the progress so that we can sync the fix into Next.js once it lands.

In the meantime, I will close this in favor of having a single report for this issue. Thank you for providing us with a reproduction 🙏

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.