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]

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 next@14.2.2. 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 next@14.1.4, 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!