storybook cli for initializing a new project appears broken

Created on 26 Oct 2020  ยท  6Comments  ยท  Source: storybookjs/storybook

Every tutorial I've encountered recommends running 

npx create-react-app taskbox
npx -p @storybook/cli sb init 
// or
npx sb init

When running yarn storybook below are the errors and the browser renders a blank page.

yarn run v1.22.10
$ start-storybook -p 6006 -s public
info @storybook/react v6.0.27
info 
info => Loading static files from: /Users/yenlyma/github-yenly/storybook-taskbox/public .
info => Loading presets
info => Loading presets
info => Loading config/preview file in "./.storybook".
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack setup.
webpack built da488e16f4fa9a7173e6 in 29936ms
โš  ๏ฝขwdm๏ฝฃ: Hash: da488e16f4fa9a7173e6
Version: webpack 4.44.2
Time: 29936ms
Built at: 10/26/2020 2:46:36 PM
                                          Asset      Size        Chunks                                Chunk Names
                            asset-manifest.json  1.18 KiB                [emitted]                     
                                    iframe.html  2.92 KiB                [emitted]                     
            main.da488e16f4fa9a7173e6.bundle.js   112 KiB          main  [emitted] [immutable]         main
        main.da488e16f4fa9a7173e6.bundle.js.map  44.9 KiB          main  [emitted] [dev]               main
    runtime~main.da488e16f4fa9a7173e6.bundle.js  35.1 KiB  runtime~main  [emitted] [immutable]         runtime~main
runtime~main.da488e16f4fa9a7173e6.bundle.js.map  36.3 KiB  runtime~main  [emitted] [dev]               runtime~main
        static/media/code-brackets.2e1112d7.svg  1.42 KiB                [emitted] [immutable]         
               static/media/colors.a4bd0486.svg  8.31 KiB                [emitted] [immutable]         
             static/media/comments.a3859089.svg  1.49 KiB                [emitted] [immutable]         
            static/media/direction.b770f9af.svg  1.25 KiB                [emitted] [immutable]         
                 static/media/flow.edad2ac1.svg  1.36 KiB                [emitted] [immutable]         
               static/media/plugin.d494b228.svg  2.12 KiB                [emitted] [immutable]         
                 static/media/repo.6d496322.svg   1.6 KiB                [emitted] [immutable]         
             static/media/stackalt.dba9fbb3.svg  2.49 KiB                [emitted] [immutable]         
    vendors~main.da488e16f4fa9a7173e6.bundle.js  7.66 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
vendors~main.da488e16f4fa9a7173e6.bundle.js.map  7.88 MiB  vendors~main  [emitted] [dev]               vendors~main
Entrypoint main [big] = runtime~main.da488e16f4fa9a7173e6.bundle.js runtime~main.da488e16f4fa9a7173e6.bundle.js.map vendors~main.da488e16f4fa9a7173e6.bundle.js vendors~main.da488e16f4fa9a7173e6.bundle.js.map main.da488e16f4fa9a7173e6.bundle.js main.da488e16f4fa9a7173e6.bundle.js.map
[0] multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js 184 bytes {main} [built]
[./.storybook/generated-stories-entry.js] 2.88 KiB {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 4.87 KiB {main} [built]
[./.storybook/storybook-init-framework-entry.js] 2.51 KiB {main} [built]
[./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js] 500 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js] 2.27 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js] 2.28 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js] 2.29 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js] 2.28 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js] 2.28 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js] 2.28 KiB {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js] 8.01 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined] (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined 7.68 KiB {vendors~main} [built]
    + 1600 hidden modules

WARNING in 
src/stories/Button.stories.js
  Line 5:1:  Assign object to a variable before exporting as module default  import/no-anonymous-default-export

src/stories/Header.stories.js
  Line 5:1:  Assign object to a variable before exporting as module default  import/no-anonymous-default-export

src/stories/Page.stories.js
  Line 6:1:  Assign object to a variable before exporting as module default  import/no-anonymous-default-export


Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.34 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.13 KiB {HtmlWebpackPlugin_0} [built]
โ•ญโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ
โ”‚                                                    โ”‚
โ”‚   Storybook 6.0.27 started                         โ”‚
โ”‚   43 s for manager and 47 s for preview            โ”‚
โ”‚                                                    โ”‚
โ”‚    Local:            http://localhost:6006/        โ”‚
โ”‚    On your network:  http://192.168.0.243:6006/    โ”‚
โ”‚                                                    โ”‚
โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ
P0 bug cli compatibility with other tools cra
Source
picture yenly
👍2

All 6 comments

The warnings are an an issue with the eslint configuration in CRA4 which was released last week and we haven't released a fix yet.

Check the browser console for errors. It's probably a dupe to #12408 which has been fixed in 6.1-alpha but not in 6.0 yet.

shilman picture shilman on 27 Oct 2020

@shilman I am experiencing the same problem and this is the error I see in the browser console though

Screen Shot 2020-10-27 at 4 34 13 PM

zeckdude picture zeckdude on 28 Oct 2020
👍1

Thanks @zeckdude. This is something new and I'm seeing it now too. I notice react-color put out a new release in the past few hours and suspect that's the culprit... ๐Ÿ˜ก

UPDATE: https://github.com/casesandberg/react-color/issues/771

shilman picture shilman on 28 Oct 2020
👍1

@shilman Yes, downgrading react-color to 2.18.0 helped for me

DiFuks picture DiFuks on 28 Oct 2020

Documented here https://github.com/storybookjs/storybook/issues/12933

I'm closing this is issue as a dupe to that and also to #12408 which is also a problem. When it rains it pours ๐Ÿ˜ญ

shilman picture shilman on 28 Oct 2020

This was fixed and released as [email protected]

casesandberg picture casesandberg on 28 Oct 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

zvictor picture zvictor  ยท  3Comments
alexanbj picture alexanbj  ยท  3Comments
MrOrz picture MrOrz  ยท  3Comments
sakulstra picture sakulstra  ยท  3Comments
arunoda picture arunoda  ยท  3Comments