[QA] React Server Components

[vanessayuenn]

React Server Components

Feature owner: @shilman

Please comment in this discussion thread for any bug report and feedback for this feature as you test out Storybook 8. Kindly adhere to the following format:

Project: Name of your project as entered in Notion
Version: The version of storybook you tested with
Bug/feedback: Details of the bugs/feedback you have

Feature owner should triage the comments here frequently and open issues as needed.

[ethriel3695]

Project: https://github.com/vercel/next-react-server-components
Version: 8.0.0-alpha.14
Bug/Feedback: The project works as expected. Client components load in Storybook as expected. Server components load as well. However, server components break the docs when there is more than one story, as expected. I grabbed a random RSC component from a tutorial on the web from Josh Comeau and added it to my project. I then added the story for that component, which works as expected.

Server Component with broken Docs page

Client Comment Component with a working Docs page and stories

Server Footer Component but not async with a working Docs page

[ethriel3695]

For anyone who finds this Discussion.
@shilman let me know that we found the issue.

The docs issue is a limitation of React.

The workaround is here #25594 (comment)

Comment on #25594 React: RSCs don't render correctly in Docs

This is a limitation of React, which cannot render multiple async component roots on the client.

Repro: https://github.com/shilman/vite-rsc-test

To work around this, you can disable inline docs rendering:

parameters: { docs: { story: { inline: false } } }

I tested it out on my RSC components, and the workaround is successful.

Here is a screenshot with docs issues and console errors.

Here is an after screenshot, with the docs rendering as expected.