Storybook stuck loading

See original GitHub issue

Describe the bug In an attempt to update from 6.4.9 to 6.4.14, after building and opening the browser tab, Storybook initially loads into its loading state, but it’s stuck there. It never completes loading its UI, like this:

image

There are no build errors/warnings, no console errors and no meaningful warnings, and no network errors.

Only thin I can see is /progress which is presumably a part of Storybook, doesn’t finish loading.

I’ve also upgraded @storybook/preset-create-react-app from 3.2.0 to 4.0.0, and in the changelog, all I can see is support for CRA 5, which is all fine - I should assume CRA v4 is not removed, is it? Because that one hadn’t been upgraded. However, downgrading this package back to 3.2.0 works around the problem: Storybook 6.4.14 now loads correctly.

To Reproduce Follow the above description.

System Please paste the results of npx sb@next info here.

  System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    npm: 8.3.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 97.0.4692.99
    Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.62)
  npmPackages:
    @storybook/addon-a11y: 6.4.14 => 6.4.14
    @storybook/addon-actions: 6.4.14 => 6.4.14
    @storybook/addon-controls: 6.4.14 => 6.4.14
    @storybook/addon-docs: 6.4.14 => 6.4.14
    @storybook/addons: 6.4.14 => 6.4.14
    @storybook/preset-create-react-app: ^3.2.0 => 3.2.0
    @storybook/react: 6.4.14 => 6.4.14
    @storybook/theming: 6.4.14 => 6.4.14

(How does this still manage to miss the one browser I’m actually using??)

Additional context Other packages noteworthy:

  • Craco 6.2.0 - using Craco means we have no direct control over whichever CRA version it uses.
  • Webpack 4.46.0 - Updating to 5.x gave us a myriad of weird problems, so we decided to stick with v4, which should be fine because that one isn’t EOL yet.

I’m in the process of updating (or trying to, honestly) our dependencies to their latest, and I would like small chunks of updates at a time. Updating too many packages in one go makes it difficult to diagnose problems. So yeah, I could also update Craco, but I don’t want to just yet, because it’s not only Storybook depending on it.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:11
  • Comments:21 (4 by maintainers)

github_iconTop GitHub Comments

9reactions
MuhammadSawalhycommented, Jul 16, 2022

There should be some error message from Storybook to help us identify what the problem is and what causes it.

For now and until Storybook take some action, we can use git bisect to identify what commit caused this problem.

5reactions
shilmancommented, May 24, 2022

@trainoasis I believe that loading error happens when you use @storybook/preset-create-react-app@4 with react-scripts@4. If this matches your setup, either upgrade to react-scripts@5 or downgrade to @storybook/preset-create-react-app@3. More discussion #18221

Read more comments on GitHub >

github_iconTop Results From Across the Web

Getting stuck loading react storybook - Stack Overflow
I can't start my storybook app. It loads only loading state (loading story). There aren't any errors in the console.
Read more >
Storybook stuck at loading - Developing with Prismic
I'm able to start the slicemachine and it works fine. But when I try to start the storybook to capture the screenshot, it...
Read more >
CLI options - Storybook
The flag --no-manager-cache disables the internal caching of Storybook and can severely impact your Storybook loading time, so only use it when you...
Read more >
wait until bundle finished, stopped at 99% [webpack 5] #14405
info @storybook/react v6.2.1 info info => Loading presets info => Loading 1 config ... @shilman we have the same error being stuck in...
Read more >
[Solved]-Storybook Navigation Sidebar stuck loading-Reactjs
[Solved]-Storybook Navigation Sidebar stuck loading-Reactjs. Search. score:4. Accepted answer. I managed to solve this by altering index.js
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found