storybookjs/storybook

[Bug]: Storybook and `next-dynamic` not resolving suspense

Open

#29,255 创建于 2024年10月1日

在 GitHub 查看
 (0 评论) (2 反应) (0 负责人)TypeScript (89,909 star) (10,058 fork)batch import
bughelp wantednextjs

描述

Describe the bug

Creating this issue on behalf of GoodRx. They provided a repro here, including the steps to reproduce below from their readme for quick reference.

Reproduction link

https://github.com/dmytrobondarchukGoodRx/storybook-dynamic

Reproduction steps

Steps to reproduce

  1. Clone the repo
  2. Run yarn
  3. Run yarn storybook or yarn build-storybook && npx http-server ./storybook-static
  4. Open the provided storybook url and open NextJs dynamic issue story folder

There are four stories here:

One is using the default CheckUserSession component (Not dynamic story) and others use the next-dynamic wrapper of that component called CheckUserSessionDynamic:

  1. Dynamic - parent and child components use fetch to get data
  2. Dynamic Child Non Async - child components don't make async calls (mock data)
  3. Dynamic All Aon Async - child and parent components don't make async calls (mock data)

During each story open the Network tab in browser tools

You will get two behaviors:

Not dynamic behavior

The page will show one main spinner from the Story's suspense and then shortly a lot of spinners for each post after resolving /posts route and will execute each HTTP request once and will show the content in a few seconds

Dynamic behavior

The page will show only the main spinner from Story's suspense and will keep spaming HTTP calls to /posts route from the <Posts /> component (except Dynamic All Aon Async story)

The same behavior was confirmed on prod environment with infinite calls to HTTP endpoint (which was added to check if re-render (?) was happening)

System

"@chromatic-com/storybook": "^1.6.1",
    "@storybook/addon-essentials": "^8.2.9",
    "@storybook/addon-interactions": "^8.2.9",
    "@storybook/addon-links": "^8.2.9",
    "@storybook/addon-onboarding": "^8.2.9",
    "@storybook/addon-styling-webpack": "^1.0.0",
    "@storybook/blocks": "^8.2.9",
    "@storybook/nextjs": "^8.2.9",
    "@storybook/react": "^8.2.9",
    "@storybook/test": "^8.2.9",
    "storybook": "^8.2.9",

Additional context

No response

贡献者指南