"npm run storybook" fails on new project

Hello,

trying to install Storybook for the first time in our (cra/rewired) project and when running “npm run storybook” I get this error:

> feelsightportal@0.1.0 storybook
> start-storybook -p 6006 -s public

info @storybook/react v6.1.17
info 
info => Loading static files from /home/mpori/tg-portal_repo/public and serving at /.
info => Using prebuilt manager
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 7 other files 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 629002449d71fad76fb7 in 7825ms
✖ ｢wdm｣: Hash: 629002449d71fad76fb7
Version: webpack 4.46.0
Time: 7825ms
Built at: 02/09/2021 11:53:29 AM
                                          Asset      Size        Chunks                                Chunk Names
                            asset-manifest.json  1.18 KiB                [emitted]                     
                                    iframe.html  4.38 KiB                [emitted]                     
            main.629002449d71fad76fb7.bundle.js  45.9 KiB          main  [emitted] [immutable]         main
        main.629002449d71fad76fb7.bundle.js.map  17.9 KiB          main  [emitted] [dev]               main
    runtime~main.629002449d71fad76fb7.bundle.js  33.5 KiB  runtime~main  [emitted] [immutable]         runtime~main
runtime~main.629002449d71fad76fb7.bundle.js.map  34.7 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.629002449d71fad76fb7.bundle.js  5.84 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
vendors~main.629002449d71fad76fb7.bundle.js.map  5.73 MiB  vendors~main  [emitted] [dev]               vendors~main
Entrypoint main [big] = runtime~main.629002449d71fad76fb7.bundle.js runtime~main.629002449d71fad76fb7.bundle.js.map vendors~main.629002449d71fad76fb7.bundle.js vendors~main.629002449d71fad76fb7.bundle.js.map main.629002449d71fad76fb7.bundle.js main.629002449d71fad76fb7.bundle.js.map
[0] multi ./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/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined 172 bytes {main} [built]
[./.storybook/generated-stories-entry.js] 404 bytes {main} [built]
[./.storybook/preview.js] 79 bytes {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 2.47 KiB {main} [built]
[./.storybook/storybook-init-framework-entry.js] 26 bytes {main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js] 2.36 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js] 2.37 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js] 2.37 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js] 2.37 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js] 2.37 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js] 2.37 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js] 2.36 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/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined] 7.68 KiB {vendors~main} [built]
    + 1420 hidden modules

ERROR in ./src/stories/Button.stories.tsx
Module not found: Error: Can't resolve './Button' in '/home/mpori/tg-portal_repo/src/stories'
 @ ./src/stories/Button.stories.tsx 85:0-34 89:13-19 97:46-52
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./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/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./src/stories/Header.stories.tsx
Module not found: Error: Can't resolve './Header' in '/home/mpori/tg-portal_repo/src/stories'
 @ ./src/stories/Header.stories.tsx 49:0-34 53:13-19 56:46-52
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./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/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./src/stories/Page.stories.tsx
Module not found: Error: Can't resolve './Header.stories' in '/home/mpori/tg-portal_repo/src/stories'
 @ ./src/stories/Page.stories.tsx 50:0-50 65:34-56 67:35-58
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./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/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./src/stories/Page.stories.tsx
Module not found: Error: Can't resolve './Page' in '/home/mpori/tg-portal_repo/src/stories'
 @ ./src/stories/Page.stories.tsx 49:0-30 54:13-17 57:46-50
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./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/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in 
src/stories/Button.stories.tsx
  Line 13:2:  Parsing error: Missing semicolon

  11 |     backgroundColor: { control: 'color' },
  12 |   },
> 13 | } as Meta;
     |  ^
  14 |
  15 | const Template: Story<ButtonProps> = (args) => <Button {...args} />;
  16 |

src/stories/Header.stories.tsx
  Line 10:2:  Parsing error: Missing semicolon

   8 |   title: 'Example/Header',
   9 |   component: Header,
> 10 | } as Meta;
     |  ^
  11 |
  12 | const Template: Story<HeaderProps> = (args) => <Header {...args} />;
  13 |

src/stories/Page.stories.tsx
  Line 11:2:  Parsing error: Missing semicolon

   9 |   title: 'Example/Page',
  10 |   component: Page,
> 11 | } as Meta;
     |  ^
  12 |
  13 | const Template: Story<PageProps> = (args) => <Page {...args} />;
  14 |


Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.32 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 1.97 KiB {HtmlWebpackPlugin_0} [built]

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Packages:

"@storybook/addon-actions": "^6.1.17",
"@storybook/addon-essentials": "^6.1.17",
"@storybook/addon-links": "^6.1.17",
"@storybook/node-logger": "^6.1.17",
"@storybook/preset-create-react-app": "^3.1.5",
"@storybook/react": "^6.1.17",

Any help would be great!

😃

Mikko

[mikkopori]

Okay, thank you all for the help. I think I solved this. So for anyone running into the same issue we had Typescript as a project dependency although we were not actually using it. Removing that from the deps enabled the init script to generate in js instead of tsx 😃

[mikkopori]

This helped, I’ve found the options on the init script

mpori@piivaskitsa:~/tg-portal_repo$ npx sb@next init --help
Usage: sb init [options]

Initialize Storybook into your project.

Options:
  -f --force                                       Force add Storybook
  -s --skip-install                                Skip installing deps
  -N --use-npm                                     Use npm to install deps
  -p --parser <babel | babylon | flow | ts | tsx>  jscodeshift parser
  -t --type <type>                                 Add Storybook for a specific project type
  --story-format <csf | csf-ts | mdx >             Generate stories in a specified format
  -y --yes                                         Answer yes to all prompts
  -h, --help                                       display help for command

and exploring those to see which will fit our project.