[Bug]: Failed to render Async Component(RSC) with Next 15.1

[NEKOYASAN]

Describe the bug

After upgrading to Next 15.1, Storybook failed to render Async Component with Promise Function inside.

Since it works fine when reverting back to Next 15.0.4, I think it may be affected by the support for "React 19 Stable" that came in Next 15.1.
In this Reproduction, the Promise Function continues to be called several times before stopping with an error, but in the environment at hand, we have confirmed that the Promise Function used by the component continues to be called almost indefinitely.

Reproduction link

https://stackblitz.com/edit/sb-promise-loop-repro?file=src%2Fstories%2FTest.tsx

Reproduction steps

1. npx create-next-app@latest
2. npx sb init
3. Create async component
4. Render async component in Storybook

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.5.0-alpha.20 => 8.5.0-alpha.20 
    @storybook/addon-interactions: ^8.5.0-alpha.20 => 8.5.0-alpha.20 
    @storybook/addon-onboarding: ^8.5.0-alpha.20 => 8.5.0-alpha.20 
    @storybook/blocks: ^8.5.0-alpha.20 => 8.5.0-alpha.20 
    @storybook/nextjs: ^8.5.0-alpha.20 => 8.5.0-alpha.20 
    @storybook/react: ^8.5.0-alpha.20 => 8.5.0-alpha.20 
    @storybook/test: ^8.5.0-alpha.20 => 8.5.0-alpha.20 
    storybook: ^8.5.0-alpha.20 => 8.5.0-alpha.20

Additional context

The same problem occurs on Chromatic, and not even an Error Message is displayed on Chromatic.

[NEKOYASAN]

A PR that seems to be relevant is #30068, but this change does not seem to have resolved this issue in my enviroment.

I think fetch within components is a common use of RSC, but do few people confront this problem?
If anyone knows of any workarounds, please let me know. (So far I haven't come up with any way to...)

[kevin-kane]

also running into the same issue

[chris-erickson]

I'm using MSW to mock the requests in an awaited call inside an asynchronous component. I even see MSW reporting that the remote call was mocked out over and over. The component never actually renders even though via logging I can see the component makes its way through all the lifecycle. The async call is calling out to the Stripe sdk.

[NEKOYASAN]

It seems that the RSC rendering is just surrounded by Suspense, but it seems that Story() is not throw a Promise.
https://github.com/storybookjs/storybook/blob/next/code/renderers/react/src/entry-preview.tsx#L12-L26

I had thought of a patch like this, but because my understanding of the Storybook was poor, there were many cases where it did not work properly.
Until the RSC resolves the Promise, it should throw the Promise itself, and after it has been resolved, it should just render the returned value.
https://gist.github.com/NEKOYASAN/a6a543dee88d749b385251d8c32073c8

However, in order to perform RSC rendering correctly, you will probably need to render using renderToReadableStream and then hydrate using hydrateRoot.

[boylec]

Here is the diff between next.js v15.0.4-canary.26 and v15.0.4-canary.27

In my environment, I've isolated the regression behavior in storybook to this change. In other words when I revert my Next.JS version to v15.0.4-canary.26 it works. When I upgrade to v15.0.4-canary.27 it starts failing as the OP described.

This Next.JS diff includes a React upgrade from 19.0.0-rc-380f5d67-20241113 to 19.0.0-rc-b01722d5-20241114.

Here is the diff for those react versions which represents going from React RC 0 to React RC 1.

Here is a post about React 19 RC 1 from the React team.

It seems the big difference is that the React 19 enableSiblingPrerendering feature flag is switched to true. Not sure yet how or why this affects Storybook the way it does: causing infinite Suspense loops in RSC components.

[NEKOYASAN]

Thank you! I wasn't able to separate the conditions for occurrence in such detail.

It seems the big difference is that the React 19 enableSiblingPrerendering feature flag is switched to true. Not sure yet how or why this affects Storybook the way it does: causing infinite Suspense loops in RSC components.

If this is a version where the enableSiblingPrerendering flag has been changed, then I can understand (a little ) why this problem occurs. (maybe That flag enable pre-warm feature added to the suspense boundary.)

facebook/react#29898 (comment)

[boylec]

Interestingly, @rickhanlonii's post in your link above mentions:

We included infinite loop protection so that apps don't get stuck in a suspend -> pre-warm -> suspend loop.

🤔

[NEKOYASAN]

I'm going to close this issue to avoid confusion and scattering of information, as it's a maybe duplicate of #30317.
If it turns out to be a different issue to #30317, we will re-open it.