Install Fails on Angular #32011

thatcort · 2025-07-10T19:01:26Z

thatcort
Jul 10, 2025

Summary

I am trying to add Storybook to an Angular 19 multi-project workspace. The installation fails with the following errors:

<i> [webpack-dev-middleware] wait until bundle finished
ERROR in node_modules/@vitest/expect/dist/index.d.ts:29:39 - error TS2503: Cannot find namespace 'Chai'.

29  protected getMatcherContext(expect?: Chai.ExpectStatic): State;
                                         ~~~~

ERROR in node_modules/@vitest/expect/dist/index.d.ts:103:19 - error TS2503: Cannot find namespace 'Chai'.

103 type ChaiPlugin = Chai.ChaiPlugin;
                      ~~~~

ERROR in node_modules/@vitest/expect/dist/index.d.ts:165:32 - error TS2503: Cannot find namespace 'Chai'.

165 interface ExpectStatic extends Chai.ExpectStatic, Matchers, AsymmetricMatchersContaining {
                                   ~~~~

ERROR in node_modules/@vitest/expect/dist/index.d.ts:631:37 - error TS2503: Cannot find namespace 'Chai'.

631 > = { [K in keyof A] : A[K] extends Chai.Assertion ? Assertion<T> : A[K] extends (...args: any[]) => any ? A[K] : VitestAssertion<A[K], T> } & ((type: string, message?: string) => Assertion);
                                        ~~~~

ERROR in node_modules/@vitest/expect/dist/index.d.ts:634:54 - error TS2503: Cannot find namespace 'Chai'.

634 interface Assertion<T = any> extends VitestAssertion<Chai.Assertion, T>, JestAssertion<T>, Matchers<T> {
                                                         ~~~~

ERROR in node_modules/@vitest/spy/dist/index.d.ts:155:65 - error TS2304: Cannot find name 'Disposable'.

155 interface MockInstance<T extends Procedure = Procedure> extends Disposable {
                                                                    ~~~~~~~~~~

preview compiled with 6 errors
DefinePlugin
Conflicting values for 'process.env.NODE_ENV'
=> Failed to build the preview
Force closed preview build
SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
Run Storybook with --debug-webpack for more information.
    at starter (./node_modules/@storybook/builder-webpack5/dist/index.js:1:24303)
    at starter.next (<anonymous>)
    at Module.start (./node_modules/@storybook/builder-webpack5/dist/index.js:1:26265)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async storybookDevServer (./node_modules/storybook/dist/core-server/index.cjs:36795:79)
    at async buildOrThrow (./node_modules/storybook/dist/core-server/index.cjs:35407:12)
    at async buildDevStandalone (./node_modules/storybook/dist/core-server/index.cjs:38031:78)
    at async withTelemetry (./node_modules/storybook/dist/core-server/index.cjs:36157:12)

Additional information

No response

Create a reproduction

No response

@thatcort · 2025-07-10T19:06:12Z

dosubot[bot]
bot Jul 10, 2025

Hi @thatcort! I'm Dosu and I’m helping the storybook team.

Your errors are caused by TypeScript trying to resolve types from Vitest and Chai, which aren't needed for a standard Angular Storybook setup. This usually happens if @vitest/expect, @vitest/spy, vitest, or @storybook/addon-vitest are present in your dependencies or referenced in your config. Storybook for Angular does not require Vitest or Chai—these are only used if you explicitly add the Vitest addon, which isn't recommended for Angular projects docs.

Here’s how to fix it:

Check your package.json for any of these: @vitest/expect, @vitest/spy, vitest, or @storybook/addon-vitest. Remove them if you don’t need them for your Angular project.
Make sure your .storybook/main.js|ts does not include @storybook/addon-vitest or any Vitest-related addons.
Delete node_modules and your lock file (package-lock.json or yarn.lock), then reinstall:
```
rm -rf node_modules package-lock.json && npm install
```
Check your tsconfig.json for any typeRoots or types fields that reference Vitest or Chai, and remove those references.
If you need Vitest for other parts of your monorepo, use separate tsconfig files or project references to isolate Storybook’s TypeScript environment from Vitest’s types.

Storybook for Angular 19 is supported with Storybook 7+ docs, so you shouldn’t need any of the Vitest/Chai packages unless you’re using the Vitest addon, which is not required for Angular.

If you still see issues after cleaning up dependencies and configs, try to create a minimal reproduction to help pinpoint the cause.

To reply, just mention @dosu.

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

0 replies

valentinpalkovic · 2025-07-10T20:42:37Z

valentinpalkovic
Jul 10, 2025
Maintainer

Hi @thatcort

can you share your tsconfig settings?

3 replies

thatcort Jul 10, 2025
Author

Sure. Here's the root tsconfig (I omitted paths for workspace projects other than the one I'm trying to add Storybook to):

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "paths": {
      ...
      "ui": ["./dist/ui"]
    },
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Here's the tsconfig.lib.json for the ui project. It's an Angular library completely default as generated by ng generate library ui:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "declaration": true,
    "declarationMap": true,
    "inlineSources": true,
    "types": []
  },
  "exclude": [
    "**/*.spec.ts"
  ]
}

I can also send the library's tsconfig.spec.json and/or tsconfig.prod.json if you like.

valentinpalkovic Jul 10, 2025
Maintainer

Can you please try to set https://www.typescriptlang.org/tsconfig/#skipLibCheck to true?

thatcort Jul 10, 2025
Author

I tried that, but got the same result.

thatcort · 2025-07-10T21:19:04Z

thatcort
Jul 10, 2025
Author

I went looking through Github issues and it looks like Storybook doesn't support the new Angular build system: #31079
I think this might be my problem.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Install Fails on Angular #32011

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

Install Fails on Angular #32011

Uh oh!

thatcort Jul 10, 2025

Summary

Additional information

Create a reproduction

Replies: 3 comments · 3 replies

Uh oh!

dosubot[bot] bot Jul 10, 2025

Uh oh!

valentinpalkovic Jul 10, 2025 Maintainer

Uh oh!

thatcort Jul 10, 2025 Author

Uh oh!

valentinpalkovic Jul 10, 2025 Maintainer

Uh oh!

thatcort Jul 10, 2025 Author

Uh oh!

Uh oh!

thatcort Jul 10, 2025 Author

thatcort
Jul 10, 2025

Replies: 3 comments 3 replies

dosubot[bot]
bot Jul 10, 2025

valentinpalkovic
Jul 10, 2025
Maintainer

thatcort Jul 10, 2025
Author

valentinpalkovic Jul 10, 2025
Maintainer

thatcort Jul 10, 2025
Author

thatcort
Jul 10, 2025
Author