[BUG] ERESOLVE - peer dependency conflicts by packages which should get replaced

[valentinpalkovic]

Is there an existing issue for this?

• I have searched the existing issues

This issue exists in the latest npm version

• I am using the latest npm

Current Behavior

I have the following package.json structure:

{
  "name": "reproduction",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {},
  "devDependencies": {
    "@storybook/react-vite": "8.4.7",
    "@storybook/test": "8.4.7",
    "storybook": "8.4.7"
  }
}

Running npm install correctly installs all packages. I want to update now manually the packages to their latest version 8.5.1.

When I run npm install, I get the following error message:

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: [email protected]
npm error Found: @storybook/[email protected]
npm error node_modules/@storybook/react-vite
npm error   dev @storybook/react-vite@"8.5.1" from the root project
npm error
npm error Could not resolve dependency:
npm error dev @storybook/react-vite@"8.5.1" from the root project
npm error
npm error Conflicting peer dependency: @storybook/[email protected]
npm error node_modules/@storybook/test
npm error   peerOptional @storybook/test@"8.5.1" from @storybook/[email protected]
npm error   node_modules/@storybook/react-vite
npm error     dev @storybook/react-vite@"8.5.1" 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

I would appreciate any help. We have been debugging this for a long time, and we already cleaned up our peer-dependencies and transitive peer-dependencies so that they are correctly declared. But currently, we don't know how to continue. npm is also the only package manager that fails.

Expected Behavior

npm install doesn't fail after package update

Steps To Reproduce

1. Create a project with the following package.json

{
  "name": "reproduction",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {},
  "devDependencies": {
    "@storybook/react-vite": "8.4.7",
    "@storybook/test": "8.4.7",
    "storybook": "8.4.7"
  }
}

2. npm install
3. Update manually the packages to their latest version 8.5.1:

{
  "name": "reproduction",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {},
  "devDependencies": {
    "@storybook/react-vite": "8.5.1",
    "@storybook/test": "8.5.1",
    "storybook": "8.5.1"
  }
}

4. npm install

Above error appears

Context:
"@storybook/[email protected]" has a peer dependency on storybook@^8.5.1
"@storybook/[email protected]" has a peer dependency on storybook@^8.5.1 and @storybook/[email protected]

Environment

• npm: 10.9.0
• Node.js: 22.12.0
• OS Name: macOS Sonoma 14.4.1
• System Model Name: Macbook Pro
• npm config:

; "user" config from /Users/valentinpalkovic/.npmrc

//registry.npmjs.org/:_authToken = (protected)
//registry.yarnpkg.com/:_authToken = (protected)
registry = "https://registry.yarnpkg.com"

; node bin location = /Users/valentinpalkovic/.nvm/versions/node/v22.12.0/bin/node
; node version = v22.12.0
; npm local prefix = /Users/valentinpalkovic/Projects/vitejs-vite-izegxbtn
; npm version = 10.9.0
; cwd = /Users/valentinpalkovic/Projects/vitejs-vite-izegxbtn
; HOME = /Users/valentinpalkovic
; Run `npm config ls -l` to show all defaults.

[valentinpalkovic]

Related issue: storybookjs/storybook#30306

[ljharb]

Why are the versions pinned instead of using ^?

[valentinpalkovic]

The initial package.json example doesn’t has the caret, because then the reproduction for sure doesn’t work, since 8.5.1 would be installed initially. I just wanted to simulate an upgrade scenario.

[ljharb]

What happens if, instead of manually editing package.json, you let npm install do the changes? meaning, npm install --save @storybook/[email protected] @storybook/[email protected] [email protected] (all in the same command)

[shashisunk]

Running npm install --legacy-peer-deps and then remove node modules then npm install it will updated to latest. there is no conflicts between the packages if we run npm install --legacy-peer-deps and npm install doesnot fail

[ljharb]

I'm not sure why --legacy-peer-deps is involved; if that flag is needed at all then the dep graph is invalid.

[valentinpalkovic]

Right. We at Storybook used legacy-peer-deps in the past and we don’t want to get back to it. We would like to understand what’s exactly wrong with the dep graph.

[valentinpalkovic]

What happens if, instead of manually editing package.json, you let npm install do the changes? meaning, npm install --save @storybook/[email protected] @storybook/[email protected] [email protected] (all in the same command)

I will try it!

[valentinpalkovic]

@ljharb I've tried npm install --save @storybook/[email protected] @storybook/[email protected] [email protected]. I still get the same error.

For context: If I install the packages in 8.5.1 from scratch, I don't get any errors, and npm can install the packages.