[RSC] Nested Promises in multiple suspense boundaries

[kirchoni]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/suspense-nested-promise-33zfhn?file=%2Fapp%2Fmodels.tsx%3A14%2C1

To Reproduce

1. Navigate to the server.tsx file
2. replace line 10 with line 12
3. Look for a server error in the console

Current vs. Expected behavior

I would expect the example to not throw.

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.0.5-canary.17
  eslint-config-next: 14.0.5-canary.17
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.2
Next.js Config:
  output: N/A

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

Not sure, App Router

Additional context

Logging:A previously unvisited boundary must have exactly one root segment..

Seems like back-to-back promises does not work great with Suspense in the specific scenario where a parent node introduces a suspense boundary which's fallback actually want's to continue rendering it's children — I'm really believe this is a valid scenario.

It's possible that this bug is in the react package itself as the report log's indicate, but it's hardly reproducible outside of NextJS + app router + RSC.

[bartoszhernas]

I have the same problem, basically boils down to

Outside Component:

<Suspense fallback={<InsideCompoent data={undefined} />}>
    <InsideComponentLoader id={1} /> {/* it loads data with promise and show as <InsideComponent data={data} /> *}
</Suspense>

Then if inside components has it's own Suspense, this error mentioned here happens.

Current solution is to just not use Suspene inside Suspense's fallback at all, which is a bummer, because it leaves you only with suspense waterfall or one big suspense for everything.

[glekner]

I think I have multiple of these in my App but I can't find a good way to debug it. I'm getting hydration errors in production and sometimes even crashes in production with the error Rendered more hooks than during the previous render..

@bartoszhernas @kirchoni have you guys found a reliable way to debug this? locally everything seems to work fine.
I checked that I don't have Suspense inside Suspense fallbacks, but I do however have multiple Suspense inside Suspense

[ztanner]

Hi -- this appeared to have been a bug in React that has been fixed by facebook/react#33467.
This fix will automatically be synced into Next.js in our next release!

[github-actions]

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.