[Bug / Solved]: Storybook failed to load the following preset: .\node_modules\@storybook\angular\preset

[Tim-arts]

Describe the bug

Getting this error while installing Storybook in a NX Monorepo:

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: .\node_modules\@storybook\angular\preset.
Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.
If you believe this is a bug, please open an issue on Github.
SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: .\node_modules\@storybook\angular\dist\server\framework-preset-angular-cli.js.
Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.
If you believe this is a bug, please open an issue on Github.
Error: Cannot find module '@angular-devkit/build-angular/src/utils/webpack-browser-config'
Require stack:
- .\node_modules\@storybook\angular\dist\server\angular-cli-webpack.js
- .\node_modules\@storybook\angular\dist\server\framework-preset-angular-cli.js
- .\node_modules\storybook\dist\common\index.cjs
- .\node_modules\@storybook\angular\dist\builders\start-storybook\index.js
- .\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
    at Function._resolveFilename (node:internal/modules/cjs/loader:1401:15)
    at defaultResolveImpl (node:internal/modules/cjs/loader:1057:19)
    at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1062:22)
    at Function._load (node:internal/modules/cjs/loader:1211:37)                                                                                                                                                                    
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)                                                                                                                                                                   
    at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)                                                                                                                                                                     
    at Module.<anonymous> (node:internal/modules/cjs/loader:1487:12)                                                                                                                                                                
    at Module.require (.\node_modules\nx\src\adapter\compat.js:73:40)                                                                                                                                                               
    at require (node:internal/modules/helpers:135:16)                                                                                                                                                                               
    at Object.<anonymous> (.\node_modules\@storybook\angular\dist\server\angular-cli-webpack.js:3:58)                                                                                                                               
More info:                                                                                                                                                                                                                          
    at loadPreset (.\node_modules\storybook\dist\common\index.cjs:23579:13)                                                                                                                                                         
More info:                                                                                                                                                                                                                          
                                                                                                                                                                                                                                    
    at loadPreset (.\node_modules\storybook\dist\common\index.cjs:23579:13)
    at async Promise.all (index 0)
    at async loadPresets (.\node_modules\storybook\dist\common\index.cjs:23589:55)
    at async getPresets (.\node_modules\storybook\dist\common\index.cjs:23622:11)
    at async buildDevStandalone (.\node_modules\storybook\dist\core-server\index.cjs:37989:11)
    at async withTelemetry (.\node_modules\storybook\dist\core-server\index.cjs:36157:12)
 NX   Broken build, fix the error above.        

Related issue: #21710

Reproduction link

https://github.com/Tim-arts/nx-monorepo

Reproduction steps

• Create a new monorepo using the nx command: npx create-nx-workspace@latest
• Add SB to the monorepo: nx add @nx/storybook
• Generate SB configuration for one app: nx g @nx/angular:storybook-configuration my-angular-project
• Run SB for that specific app: nx run my-angular-project:storybook
• Verify the issue

I'm basically following the fresh documentation of NX and been using only official commands since for that setup

System

Storybook Environment Info:

  System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 22.17.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD <----- active
  Browsers:
    Edge: Chromium (138.0.3351.95)

Additional context

No response

[dosubot]

Hi @Tim-arts! I'm Dosu and I’m helping the storybook team.

Your error is usually caused by one or more of the following: missing or incompatible dependencies, using an unsupported Angular version, or a misconfigured builders.json file.

Here’s a checklist to resolve it:

1. Make sure you’re using Angular 18 or newer—Storybook now requires Angular 18+ and does not support 15–17 anymore (source).
2. Check that @angular-devkit/build-angular is installed in your root package.json. If it’s missing, add it with npm install -D @angular-devkit/build-angular (source).
3. If you’re on Angular 19, you need Storybook v9.1.0-alpha.10 or newer. Older versions have a builders.json that points to directories instead of explicit file paths, which Angular 19’s strict ESM resolution rejects. Either upgrade Storybook or manually edit node_modules/@storybook/angular/builders.json to use explicit file paths like ./dist/builders/start-storybook/index.js (source).
4. All Storybook and Angular dependencies must be in the root package.json, not in subfolders or secondary package.json files (source).
5. Storybook does not yet support the new Angular build system. If you’re using it, switch back to the legacy build system for now (source).

If you still see the error after these steps, please share the output of npm ls @storybook/angular @angular-devkit/build-angular @nx/storybook @nx/angular and the relevant parts of your package.json.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[Tim-arts]

1. Version of Angular in package.json is 20.1 ✅
2. @angular-devkit/build-angular was not installed by default. I had to install it manually (with force param) due to a peer dependency issue with Jest 29 ❌
3. Version of Storybook is 9.0.18 ✅
4. ✅
5. Having a look at the project.json contained inside "nx-monorepo" app, it seems to be using the new build system ("executor": "@angular/build:application") ❌

After installing @angular-devkit/build-angular, I ran once again the command nx run nx-monorepo:storybook and it finally worked 🎉

Observations:

• Dosu helped me fix the issue
• Feel free to close the issue, but ideally, users shouldn’t have to go through the missing dev dependency install to get it working
• Using the new build system didn't seem to have any issue here

[valentinpalkovic]

Hi @Tim-arts,

NX's Storybook builder is a custom setup builder specifically made for NX. This is a bug in @nx/angular:storybook-configuration. I will let the NX folks know about this issue. Thanks for reporting!