storybook fails on fresh Angular 13 app

[tanner-wisniewski]

Describe the bug
When I create a fresh Angular 13 app, then use sb init, the npm run storybook fails with build errors in the .stories.ts files. These errors always land on typescript syntax, and I can change which lines error out by removing the type annotations. The failed build output is listed in the additional context.

No additional changes were made beyond the commands run below.

To Reproduce

Run these commands:

• ng new TestStories
• npx sb@next --type angular
• npm run storybook

System

Environment Info:

  System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz
  Binaries:
    Node: 14.17.5 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.14 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.55)
  npmPackages:
    @storybook/addon-actions: ^6.5.0-alpha.14 => 6.5.0-alpha.14
    @storybook/addon-essentials: ^6.5.0-alpha.14 => 6.5.0-alpha.14
    @storybook/addon-links: ^6.5.0-alpha.14 => 6.5.0-alpha.14
    @storybook/angular: ^6.5.0-alpha.14 => 6.5.0-alpha.14
    @storybook/builder-webpack5: ^6.5.0-alpha.14 => 6.5.0-alpha.14
    @storybook/manager-webpack5: ^6.5.0-alpha.14 => 6.5.0-alpha.14

Additional context

Failed build output:

info @storybook/angular v6.5.0-alpha.14
info
info => Loading presets
info => Using implicit CSS loaders
info => Loading angular-cli config for angular >= 13.0.0
info => Using angular project with "tsConfig:C:\[Path to project]\TestStory\.storybook\tsconfig.json"
WARN Your Storybook startup uses a solution that will not be supported in version 7.0.
WARN You must use angular builder to have an explicit configuration on the project used in angular.json
WARN Read more at:
WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder)
WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13)
info => Using angular project "TestStory:build" for configuring Storybook
info => Using prebuilt manager
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
18% building 3/19 entries 937/1064 dependencies 83/320 modules[BABEL] Note: The code generator has deoptimised the styling of C:\[Path to project]\TestStory\node_modules\prettier\standalone.js as it exceeds the max of 500KB.
99% done plugins webpack-hot-middlewarewebpack built preview 71a6ecda309c357888c4 in 38297ms
ModuleParseError: Module parse failed: Unexpected token (21:2)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@storybook/source-loader/dist/cjs/index.js
You may need an additional loader to handle the result of these loaders.
|     backgroundColor: { control: 'color' },
|   },
> } as Meta;
|
| // More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
    at handleParseError (C:\[Path to project]\TestStory\node_modules\webpack\lib\NormalModule.js:969:19)
    at C:\[Path to project]\TestStory\node_modules\webpack\lib\NormalModule.js:1088:5
    at processResult (C:\[Path to project]\TestStory\node_modules\webpack\lib\NormalModule.js:793:11)
    at C:\[Path to project]\TestStory\node_modules\webpack\lib\NormalModule.js:853:5
    at C:\[Path to project]\TestStory\node_modules\loader-runner\lib\LoaderRunner.js:406:3
    at iterateNormalLoaders (C:\[Path to project]\TestStory\node_modules\loader-runner\lib\LoaderRunner.js:232:10)
    at iterateNormalLoaders (C:\[Path to project]\TestStory\node_modules\loader-runner\lib\LoaderRunner.js:239:10)
    at C:\[Path to project]\TestStory\node_modules\loader-runner\lib\LoaderRunner.js:254:3
    at context.callback (C:\[Path to project]\TestStory\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at C:\[Path to project]\TestStory\node_modules\babel-loader\lib\index.js:59:71
ModuleParseError: Module parse failed: Unexpected token (26:2)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@storybook/source-loader/dist/cjs/index.js
You may need an additional loader to handle the result of these loaders.
|     }),
|   ],
> } as Meta;
|
| const Template: Story<Header> = (args: Header) => ({
    at handleParseError (C:\[Path to project]\TestStory\node_modules\webpack\lib\NormalModule.js:969:19)
    at C:\[Path to project]\TestStory\node_modules\webpack\lib\NormalModule.js:1088:5
    at processResult (C:\[Path to project]\TestStory\node_modules\webpack\lib\NormalModule.js:793:11)
    at C:\[Path to project]\TestStory\node_modules\webpack\lib\NormalModule.js:853:5
    at C:\[Path to project]\TestStory\node_modules\loader-runner\lib\LoaderRunner.js:406:3
    at iterateNormalLoaders (C:\[Path to project]\TestStory\node_modules\loader-runner\lib\LoaderRunner.js:232:10)
    at iterateNormalLoaders (C:\[Path to project]\TestStory\node_modules\loader-runner\lib\LoaderRunner.js:239:10)
    at C:\[Path to project]\TestStory\node_modules\loader-runner\lib\LoaderRunner.js:254:3
    at context.callback (C:\[Path to project]\TestStory\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at C:\[Path to project]\TestStory\node_modules\babel-loader\lib\index.js:59:71
ModuleParseError: Module parse failed: Unexpected token (27:2)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@storybook/source-loader/dist/cjs/index.js
You may need an additional loader to handle the result of these loaders.
|     }),
|   ],
> } as Meta;
|
| const Template: Story<Page> = (args: Page) => ({
    at handleParseError (C:\[Path to project]\TestStory\node_modules\webpack\lib\NormalModule.js:969:19)
    at C:\[Path to project]\TestStory\node_modules\webpack\lib\NormalModule.js:1088:5
    at processResult (C:\[Path to project]\TestStory\node_modules\webpack\lib\NormalModule.js:793:11)
    at C:\[Path to project]\TestStory\node_modules\webpack\lib\NormalModule.js:853:5
    at C:\[Path to project]\TestStory\node_modules\loader-runner\lib\LoaderRunner.js:406:3
    at iterateNormalLoaders (C:\[Path to project]\TestStory\node_modules\loader-runner\lib\LoaderRunner.js:232:10)
    at iterateNormalLoaders (C:\[Path to project]\TestStory\node_modules\loader-runner\lib\LoaderRunner.js:239:10)
    at C:\[Path to project]\TestStory\node_modules\loader-runner\lib\LoaderRunner.js:254:3
    at context.callback (C:\[Path to project]\TestStory\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at C:\[Path to project]\TestStory\node_modules\babel-loader\lib\index.js:59:71

This is using Angular ~13.0.0 with typescript ~4.4.3

I had tried using the angular.json configuration mentioned in the warnings at the top of the build output, but that did not change the actual errors when I run ng run TestStories:storybook, so I did not include that in the reproduction steps

[pascal-puetz]

I am seeing the same errors in a fresh project with Angular 13.0.4, as well as our existing codebase (same version). Since I only see the errors in .stories.ts files and not in the actual component files, I suspect the typescript loader is somehow not processing these.

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.15 containing PR #17206 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.

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.13 containing PR #17206 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

[Milos5611]

This is so ridiculous, I still see this error and can't set up Storybook on the fresh Angular 13 project.
"@angular/core": "~13.3.0", "@storybook/angular": "^6.4.22",

You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| backgroundColor: { control: 'color' },
| },

} as Meta;