[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.