[Bug]: Error when try to add storybook@7 to Angular@15 by using this command npx storybook@7 init --type angular

[khunemz]

Describe the bug

Try to add storybook@7 to angular15:

npx storybook@7 init --type angular
And it gives error:

An error occurred while installing dependencies:
NPM error

Please check the logfile generated at ./storybook.log for troubleshooting and try again.

     Error: NPM error

Please check the logfile generated at ./storybook.log for troubleshooting and try again.
    at NPMProxy.addDependencies (/Users/chutipongroobklom/.npm/_npx/a0ad28a5a4284c69/node_modules/@storybook/cli/dist/generate.js:54:75)
    at async baseGenerator (/Users/chutipongroobklom/.npm/_npx/a0ad28a5a4284c69/node_modules/@storybook/cli/dist/generate.js:76:1838)
    at async generator (/Users/chutipongroobklom/.npm/_npx/a0ad28a5a4284c69/node_modules/@storybook/cli/dist/generate.js:92:3520)
    at async installStorybook (/Users/chutipongroobklom/.npm/_npx/a0ad28a5a4284c69/node_modules/@storybook/cli/dist/generate.js:108:7205)
    at async doInitiate (/Users/chutipongroobklom/.npm/_npx/a0ad28a5a4284c69/node_modules/@storybook/cli/dist/generate.js:132:845)
    at async withTelemetry (/Users/chutipongroobklom/.npm/_npx/a0ad28a5a4284c69/node_modules/@storybook/core-server/dist/index.js:65:3948)
    at async initiate (/Users/chutipongroobklom/.npm/_npx/a0ad28a5a4284c69/node_modules/@storybook/cli/dist/generate.js:156:250)

in ./storybook.log

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error   dev react@"^19.1.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from @storybook/[email protected]
npm error node_modules/@storybook/blocks
npm error   dev @storybook/blocks@"7.6.20" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /Users/chutipongroobklom/.npm/_logs/2025-04-29T10_56_02_324Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/chutipongroobklom/.npm/_logs/2025-04-29T10_56_02_324Z-debug-0.log

Reproduction link

Reproduction steps

1. Just try to init a storybook to an exsiting app by using this command npx storybook@7 init --type angular
2. It shows error.

System

Storybook Environment Info:

  System:
    OS: macOS 15.4.1
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm <----- active
  Browsers:
    Chrome: 135.0.7049.115
    Edge: 135.0.3179.98
    Safari: 18.4
  npmPackages:
    @storybook/addon-essentials: ^7.6.20 => 7.6.20

Additional context

package.json

{
  "name": "myapp",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "@storybook/addon-essentials": "^7.6.20",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.11",
    "@angular/cli": "~15.2.11",
    "@angular/compiler-cli": "^15.2.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.9.4"
  }
}

[greptile-apps[bot]]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
The error occurs because React 19.1.0 is incompatible with Storybook's peer dependencies. To resolve: 1. Remove the React dependency from your package.json if it exists 2. Install Storybook with the --legacy-peer-deps flag: bash npx storybook@7 init --type angular --legacy-peer-deps Angular projects don't require React as a direct dependency - Storybook will manage the correct React version internally.

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile

[khunemz]

No luck after running the command npx storybook@7 init --type angular --legacy-peer-deps it gave error: unknown option '--legacy-peer-deps'

[valentinpalkovic]

Hi @khunemz

Thank you for opening the issue!

It seems that you have React 19 installed as a dependency, although Storybook 7 only supports React 16-18. Either downgrade your React version or use npm's "overrides" field. Then, try to initialize again.

{
  "dependencies": {
     "react": "^19.0.0"
  },
  "overrides": {
     "react": "react$"
  }
}