[Bug]: npx@latest upgrade crashes, also regression bug

[stevensacks]

Describe the bug

Running npx sb@latest upgrade for version 8.3.2 has two issues:

Regression bug with pinned dependencies

There was a previous fix where if the package.json dependency versions were pinned, the upgrade script would not insert a caret before the version anymore. This issue has returned. A ^ is being injected on pinned dependencies.

npm error

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
npm error   dev @storybook/react@"^8.3.2" from the root project
npm error   @storybook/react@"8.3.1" from @storybook/[email protected]
npm error   node_modules/@storybook/react-vite
npm error     dev @storybook/react-vite@"^8.3.2" from the root project
npm error
npm error Could not resolve dependency:
npm error dev @storybook/react@"^8.3.2" 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.3.2" from @storybook/[email protected]
npm error   node_modules/@storybook/react
npm error     dev @storybook/react@"^8.3.2" 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.

The only fix for this is to delete node_modules and package-lock.json and run npm install. Then 8.3.2 will install correctly.

Reproduction link

https://storybook.js.org/

Reproduction steps

Run npx sb@latest upgrade on a project that has 8.3.1.

System

Storybook Environment Info:

  System:
    OS: macOS 14.6.1
    CPU: (12) arm64 Apple M2 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.3 - ~/.nvm/versions/node/v20.17.0/bin/npm <----- active
    pnpm: 8.1.0 - ~/.nvm/versions/node/v20.17.0/bin/pnpm
  Browsers:
    Chrome: 128.0.6613.139
    Safari: 17.6
  npmPackages:
    @storybook/addon-essentials: ^8.3.2 => 8.3.2 
    @storybook/addon-interactions: ^8.3.2 => 8.3.2 
    @storybook/addon-links: ^8.3.2 => 8.3.2 
    @storybook/blocks: ^8.3.2 => 8.3.2 
    @storybook/manager-api: ^8.3.2 => 8.3.2 
    @storybook/preview-api: ^8.3.2 => 8.3.2 
    @storybook/react: ^8.3.2 => 8.3.2 
    @storybook/react-vite: ^8.3.2 => 8.3.2 
    @storybook/test: ^8.3.2 => 8.3.2 
    @storybook/theming: ^8.3.2 => 8.3.2 
    @storybook/types: ^8.3.2 => 8.3.2 
    chromatic: 11.10.2 => 11.10.2 
    eslint-plugin-storybook: 0.8.0 => 0.8.0 
    storybook: ^8.3.2 => 8.3.2 
    storybook-dark-mode: 4.0.2 => 4.0.2 
    storybook-react-i18next: 3.1.7 => 3.1.7

Additional context

No response

[valentinpalkovic]

I don't understand how the error message correlates with the issue you described. Can you elaborate?

[stevensacks]

There are two separate issues. The first is the regression where the caret is being injected again. That was fixed a few versions back and now it's returned.

The second it that when you run npx sb@latest upgrade the upgrade throws the above error during the process, and all npm install attempts after that fail because the package-lock.json seems to be in a broken state. The only solution is to delete node_modules and package-lock.json and run npm install, which at that point works, and Storybook 8.3.2 is installed without error. However, if you don't delete package-lock.json, you will always get that error during any package installation, not just Storybook, until you delete package-lock.json and reinstall from scratch.

This happened on three completely separate projects when I upgraded each.

[rakibatomnixima]

I also faced this when upgrading from 8.3.0 to 8.3.1 and also facing this issue now.

[stevensacks]

This is still happening when I ran npx sb@latest upgrade from 8.3.2 to 8.3.3.

╭───────────────────────────────────────────────────────────────╮
│                                                               │
│   Upgrading Storybook from version 8.3.2 to version 8.3.3..   │
│                                                               │
╰───────────────────────────────────────────────────────────────╯
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
info Checking for upgrade blockers...
No blockers found.

info Updating dependencies in package.json..
Installing dependencies...

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
npm error   dev @storybook/react@"^8.3.3" from the root project
npm error   @storybook/react@"8.3.2" from @storybook/[email protected]
npm error   node_modules/@storybook/react-vite
npm error     dev @storybook/react-vite@"^8.3.3" from the root project
npm error
npm error Could not resolve dependency:
npm error dev @storybook/react@"^8.3.3" 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.3.3" from @storybook/[email protected]
npm error   node_modules/@storybook/react
npm error     dev @storybook/react@"^8.3.3" 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.

[JReinhold]

I can reproduce this. Here are my steps:

1. npm create vite test-29169 -- --template react-ts
2. cd test-29169
3. npm install
4. add legacy-peer-deps=true to .npmrc to get around [Bug]: init fails in React+Vite+npm because of conflicting versions of eslint #29212
5. npx [email protected] init
6. remove eslint-plugin-storybook from package.json to get around that same issue
7. pin all Storybook dependencies to 8.3.1
8. Remove package-lock.json, node_modules and .npmrc you just created
9. npm install - now the project is in a clean state
10. npx storybook@latest upgrade
11. See error as described above

[JReinhold]

I've investigated this further, and it's really npm acting very strange with strict peer dependencies.

If you have a fresh project (like described above), with all Storybook dependencies pinned to 8.3.2, a correct lock-file and node_modules. Then you manually change all the Storybook versions in package.json to ^8.3.3 and run npm install, you'll get the same error as above.

It seems that while trying to install the changed dependencies, npm looks into the node_modules and see that what it already have doesn't match. "I already have @storybook/[email protected] which doesn't match the peer dep requirement of @storybook/[email protected]", when in fact it should only run that check after it has installed all the updated packages - because then it would match.

If you delete node_modules (keep lock-file intact) then it doesn't error. 🙃

I'm not saying this isn't something we should try to fix, just saying that npm is acting strange when upgrading pinned peer deps.

[dannyhw]

I was having this problem and the only thing I could do to get past it was override the react version to force a specific version

like

 "resolutions": {
    "react": "18.3.1"
  },

or

  "overrides": {
    "react": "18.3.1"
  },

[stevensacks]

This seems to have something to do with removing the pnpm package.json fix. That’s when it started happening.