Storybook stuck loading #17329

thany · 2022-01-25T11:06:31Z

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:

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.

The text was updated successfully, but these errors were encountered:

nvonbenken · 2022-01-27T14:59:03Z

Having the same problem with webpack 5 on the latest prerelease.

System:
   OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
   CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
 Binaries:
   Node: 16.13.2 - /tmp/fnm_multishells/400_1643292508391/bin/node
   npm: 8.1.2 - /tmp/fnm_multishells/400_1643292508391/bin/npm
 npmPackages:
   @storybook/addon-actions: ^6.5.0-alpha.23 => 6.5.0-alpha.23
   @storybook/addon-docs: ^6.5.0-alpha.23 => 6.5.0-alpha.23
   @storybook/addon-links: ^6.5.0-alpha.23 => 6.5.0-alpha.23
   @storybook/addon-storyshots: ^6.5.0-alpha.23 => 6.5.0-alpha.23
   @storybook/addons: ^6.5.0-alpha.23 => 6.5.0-alpha.23
   @storybook/builder-webpack5: ^6.5.0-alpha.23 => 6.5.0-alpha.23
   @storybook/manager-webpack5: ^6.5.0-alpha.23 => 6.5.0-alpha.23
   @storybook/preset-create-react-app: ^4.0.0 => 4.0.0
   @storybook/react: ^6.5.0-alpha.23 => 6.5.0-alpha.23

shilman · 2022-01-28T11:52:52Z

There are probably two different problems going on here.

@thany I think your use case of using webpack4 with CRA5 is not supported by the preset.

@nvonbenken I think you are hitting a bug starting in 6.5.0-alpha.23 introduced by #16727. you can downgrade to 6.5.0-alpha.22 or wait for a fix which should be forthcoming.

shilman · 2022-01-28T12:26:01Z

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.26 containing PR #17361 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

RishikeshVedpathak · 2022-05-22T15:30:59Z

The issue still persists even after upgrading storybook to 6.5.3

trainoasis · 2022-05-23T10:51:07Z

Have the same issue after upgrading from 6.4.22 to 6.5.4. Any tips appreciated

shilman · 2022-05-24T09:49:41Z

@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

trainoasis · 2022-05-28T10:12:26Z

@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

it does, and have tried that, thanks - in general I want to upgrade to react-scripts@5 but unfortunately that brings up many other issues so it seems it'll have to wait (even though there's many security vulnerabilities with the old version).

b-a-merritt · 2022-06-20T05:12:27Z

Be careful that this behavior is not being caused by the component hierarchy having two consecutive /. I spent some time thinking I needed to downgrade react-scripts when it was that I had mistakenly written something like:

export default {
   title: "Atoms//Button
} as Meta

MuhammadSawalhy · 2022-07-16T16:53:27Z

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.

aommm · 2022-10-22T19:41:59Z

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

Agree, it would be great with some error messages in the "infinite spinner" case.
I'm trying to set up storybook for my project now, but after running into the infinite spinner I'm not sure how to proceed. (I probably have some problem with my Webpack config, but it's hard to tell)

NourIM · 2022-11-02T17:10:24Z

I'm having the same issue and have deadline to deliver the storybook and I'm sooooo blocked :(

velidan · 2022-11-03T00:03:41Z

@NourIM try to check the browser dev tools console. I had the same problem but then I checked the console logs and found that some import was undefined

misiyevich · 2022-11-09T10:50:46Z

no way to understand what's happened: ( sad

NourIM · 2022-11-09T11:34:10Z

@velidan :(

johannespn · 2022-11-09T12:08:14Z

This should not be closed :) @shilman

shilman · 2022-11-10T03:35:28Z

@johannespn What's left to do here?

NourIM · 2022-11-10T15:13:47Z

Hi @shilman! I'm running the storybook with the below configuration and I'm only getting a spinning page

const configFactory = require('../config/webpack.config');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  stories: ['../src/**/*.stories.@(ts|tsx|js|jsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-postcss',
    '@storybook/preset-create-react-app'
  ],
  framework: '@storybook/react',
  features: {
    interactionsDebugger: true
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false
      }
    }
  },
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions
      })
    ];

    return { ...config, module: { ...config.module, rules:configFactory('development').module.rules } 
   };
  }
};

Environment Info:

  System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.6.0 - ~/.nvm/versions/node/v18.6.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.13.2 - ~/.nvm/versions/node/v18.6.0/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Safari: 16.0
  npmPackages:
    @storybook/addon-actions: 6.5.13 => 6.5.13
    @storybook/addon-essentials: 6.5.13 => 6.5.13
    @storybook/addon-interactions: 6.5.13 => 6.5.13
    @storybook/addon-links: 6.5.13 => 6.5.13
    @storybook/addon-postcss: 2.0.0 => 2.0.0
    @storybook/builder-webpack4: 6.5.13 => 6.5.13
    @storybook/manager-webpack4: 6.5.13 => 6.5.13
    @storybook/preset-create-react-app: 4.1.2 => 4.1.2
    @storybook/preset-typescript: 3.0.0 => 3.0.0
    @storybook/react: 6.5.13 => 6.5.13
    @storybook/testing-library: 0.0.13 => 0.0.13

I used react-scripts": "5.0.1" and @storybook/preset-create-react-app": "4.1.2" to solve the issue as you mentioned before and it did not work :(

webpack.txt

sorry, I can't share my repo it's private.

zemfr · 2022-12-01T09:00:08Z

In my case all requests were rewritten to index.html. I added rewrite rule fore iframe.html

christineurban · 2022-12-07T01:08:54Z

Not sure if this will help anyone but after a few hours of debugging I finally got rid of the stuck loading by fixing this little mistake:

import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { Heading as HeadingComponent } from "../components/heading";

export default {
  title: "Heading",
  component: HeadingComponent,
} as ComponentMeta<typeof HeadingComponent>;


// bad - VSCode doesn't highlight this as error for me so I couldn't see the issue
export const Heading: ComponentStory<typeof HeadingComponent> = () => (
  <Heading <--- this
    size="xxl"
    level="h1"
    children="This is an xxl heading"
  />
);

// good
export const Heading: ComponentStory<typeof HeadingComponent> = () => (
  <HeadingComponent
    size="xxl"
    level="h1"
    children="This is an xxl heading"
  />
);

glassdimlygr · 2022-12-15T16:04:37Z

This bug should not be closed. Storybook should output some reason as to why it is whitescreening.

glassdimlygr · 2022-12-15T16:13:30Z

This happened to me on FF when I had too many storybook tabs open. I don't know why, but opening in Chrome / closing all my FF tabs with SB in them made the whitescreening go away.

arimendelow · 2022-12-28T19:04:43Z

agreed, same issue, please reopen. in my case it's caused by passing a specific prop into the component, i have no clue why it's causing this issue. zero logging whatsoever

kajurek · 2023-01-12T13:41:51Z

I'm facing the same issue using:
"@nrwl/storybook": "15.3.0"
"@storybook/addon-essentials": "~6.5.9",
"@storybook/builder-vite": "0.2.5",
"@storybook/core-server": "~6.5.9",
"@storybook/react": "~6.5.9",

please reopen and fix the issue

B1RO · 2023-01-23T08:28:27Z

For me this happens in a monorepo. When my story imports one of my monorepo packages/a component that uses that package, the storybook ends up infinitely loading. There is no error.

gayancharith · 2023-02-01T11:11:49Z

also facing the same issue.

    "@storybook/react": "6.5.16",
    "@storybook/addon-essentials": "6.5.16",
    "@storybook/addon-viewport": "6.5.16",
    "@storybook/preset-create-react-app": "4.1.2",
    "storybook-addon-next-router": "^4.0.2",

ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/username/node_modules/chalk/source/index.js from /Users/username/node_modules/@storybook/react/node_modules/@storybook/node-logger/dist/cjs/index.js not supported.

ERR! Instead change the require of /Users/username/node_modules/chalk/source/index.js in /Users/username/node_modules/@storybook/react/node_modules/@storybook/node-logger/dist/cjs/index.js to a dynamic import() which is available in all CommonJS modules.

clevertree · 2023-03-18T16:09:55Z

this issue is hitting people at random and is likely caused by corporate sabotage paid for by competition like figma. We have to wait for the developers to be not paid off to fix this one

NathanVss · 2023-03-21T11:15:07Z

We are facing this exact same issue too. 😕

blcoyote · 2023-03-21T13:32:39Z

Tagging along on this.

/progress is 2.4 minutes loading on a NX single app monorepo "@nrwl/storybook": "^15.8.6",

tonalnik · 2023-04-18T09:33:03Z

In my case, I used some context provider, that was export default abstract class SomeContextService { ... }. I change it to

abstract class SomeContextService { ... }
export default SomeContextService

and it starts working for some reason

chuanqisun · 2023-06-29T19:09:28Z

Same issue.

Monorepo
Ubuntu 22.04
React + TypeScript + Vite

With barebone main.ts

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
	stories: ["../src/**/button.stories.@(js|jsx|ts|tsx)"],
	addons: ["@storybook/addon-essentials"],
	framework: {
		name: "@storybook/react-vite",
		options: {},
	},
};
export default config;

And barebone preview.ts

import type { Preview } from "@storybook/react";

const preview: Preview = {
	parameters: {
		actions: { argTypesRegex: "^on[A-Z].*" },
		controls: {
			matchers: {
				color: /(background|color)$/i,
				date: /Date$/,
			},
		},
	},
};

export default preview;

lockykeaney · 2023-08-16T00:51:17Z

Same thing has happened to me. It was working fine 10 minutes ago, and then I tried to add storybook-preset-inline-svg and got the infinite load.

Removed the dependencies and re-ran yarn install but the issue persists.

No real indication of the issue, but this error might be related:

Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

Version 6.5.16, and I can't upgrade because the project is React 17 and react-native-web which isn't supported in the new version, I've tried.

clevertree · 2023-08-16T17:02:33Z

@lockykeaney did you try removing node_modules? We're trusting yarn to remove old code and not compromise our systems. Can't leave any stones unturned

lockykeaney · 2023-08-20T23:57:50Z

@clevertree Yeah, done the whole nuke and everything, but no change.

I might have to completely remove my install of storybook and give it another shot.

thany added bug needs triage labels Jan 25, 2022

shilman added the cra Prioritize create-react-app compatibility label Jan 28, 2022

shilman mentioned this issue Jan 28, 2022

Revert "Core: Rename generated-stories-entry to cjs extension so require works" #17361

Merged

shilman closed this as completed Jan 28, 2022

shilman removed the needs triage label Nov 10, 2022 — with Volta.net

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Storybook stuck loading #17329

Storybook stuck loading #17329

thany commented Jan 25, 2022

nvonbenken commented Jan 27, 2022 •

edited

shilman commented Jan 28, 2022 •

edited

shilman commented Jan 28, 2022

RishikeshVedpathak commented May 22, 2022

trainoasis commented May 23, 2022 •

edited

shilman commented May 24, 2022

trainoasis commented May 28, 2022

b-a-merritt commented Jun 20, 2022

MuhammadSawalhy commented Jul 16, 2022 •

edited

aommm commented Oct 22, 2022

NourIM commented Nov 2, 2022 •

edited

velidan commented Nov 3, 2022 •

edited

misiyevich commented Nov 9, 2022 •

edited

NourIM commented Nov 9, 2022

johannespn commented Nov 9, 2022

shilman commented Nov 10, 2022

NourIM commented Nov 10, 2022 •

edited

zemfr commented Dec 1, 2022

christineurban commented Dec 7, 2022

glassdimlygr commented Dec 15, 2022

glassdimlygr commented Dec 15, 2022

arimendelow commented Dec 28, 2022

kajurek commented Jan 12, 2023

B1RO commented Jan 23, 2023

gayancharith commented Feb 1, 2023

clevertree commented Mar 18, 2023

NathanVss commented Mar 21, 2023

blcoyote commented Mar 21, 2023

tonalnik commented Apr 18, 2023 •

edited

chuanqisun commented Jun 29, 2023

lockykeaney commented Aug 16, 2023

clevertree commented Aug 16, 2023

lockykeaney commented Aug 20, 2023

Storybook stuck loading #17329

Storybook stuck loading #17329

Comments

thany commented Jan 25, 2022

nvonbenken commented Jan 27, 2022 • edited

shilman commented Jan 28, 2022 • edited

shilman commented Jan 28, 2022

RishikeshVedpathak commented May 22, 2022

trainoasis commented May 23, 2022 • edited

shilman commented May 24, 2022

trainoasis commented May 28, 2022

b-a-merritt commented Jun 20, 2022

MuhammadSawalhy commented Jul 16, 2022 • edited

aommm commented Oct 22, 2022

NourIM commented Nov 2, 2022 • edited

velidan commented Nov 3, 2022 • edited

misiyevich commented Nov 9, 2022 • edited

NourIM commented Nov 9, 2022

johannespn commented Nov 9, 2022

shilman commented Nov 10, 2022

NourIM commented Nov 10, 2022 • edited

zemfr commented Dec 1, 2022

christineurban commented Dec 7, 2022

glassdimlygr commented Dec 15, 2022

glassdimlygr commented Dec 15, 2022

arimendelow commented Dec 28, 2022

kajurek commented Jan 12, 2023

B1RO commented Jan 23, 2023

gayancharith commented Feb 1, 2023

clevertree commented Mar 18, 2023

NathanVss commented Mar 21, 2023

blcoyote commented Mar 21, 2023

tonalnik commented Apr 18, 2023 • edited

chuanqisun commented Jun 29, 2023

lockykeaney commented Aug 16, 2023

clevertree commented Aug 16, 2023

lockykeaney commented Aug 20, 2023

nvonbenken commented Jan 27, 2022 •

edited

shilman commented Jan 28, 2022 •

edited

trainoasis commented May 23, 2022 •

edited

MuhammadSawalhy commented Jul 16, 2022 •

edited

NourIM commented Nov 2, 2022 •

edited

velidan commented Nov 3, 2022 •

edited

misiyevich commented Nov 9, 2022 •

edited

NourIM commented Nov 10, 2022 •

edited

tonalnik commented Apr 18, 2023 •

edited