storybookjs/storybook

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

Open

#29255 opened on Oct 1, 2024

View on GitHub
 (0 comments) (2 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
bughelp wantednextjs

Description

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

Contributor guide

Tech stack
storybooknextjsreacttypescript
Domain
frontendtesting
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
4
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
3-5 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Familiarity with StorybookUnderstanding of Next.js dynamic importsBasic React suspense knowledge
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
The issue reproduces with a provided repo (https://github.com/dmytrobondarchukGoodRx/storybook dynamic). Start by cloning and running the reproduction steps. The bug is that when using next/dynamic inside Storybook, the component makes infinite HTTP calls instead of resolving suspense. Investigate how Storybook's nextjs framework handles dynamic imports and compare with Next.js runtime behavior. Look at the `@storybook/nextjs` package code for potential issues with suspense boundary handling. Consider checking the linked PRs or similar issues if any.