[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: gaia-template-remix@1.0.0-beta
npm error Found: @storybook/react@8.3.1
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/react-vite@8.3.1
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/test@8.3.2
npm error node_modules/@storybook/test
npm error   peerOptional @storybook/test@"8.3.2" from @storybook/react@8.3.2
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: gaia-template-remix@1.0.0-beta
npm error Found: @storybook/react@8.3.2
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/react-vite@8.3.2
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/test@8.3.3
npm error node_modules/@storybook/test
npm error   peerOptional @storybook/test@"8.3.3" from @storybook/react@8.3.3
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 storybook@8.3.1 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/test@8.3.2 which doesn't match the peer dep requirement of @storybook/test@8.3.3", 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.

[seb-lean]

I don't get a message telling me to update to update to the latest version, is that related?

[stevensacks]

This is still happening with every version. I'm at 8.4.2 and the only solution is to delete node_modules and package-lock.json and reinstall everything.

[kasperpeulen]

@stevensacks Can you give a repro for that.

We tried to fix that with this PR:
#29503

We also patched this PR back to 8.2.10 and 8.3.7.

I still got into this issue with a project that was using addon designs:
https://github.com/storybookjs/addon-designs

I also changed the peer dep constraints there:
https://github.com/storybookjs/addon-designs/releases/tag/v8.0.4

If you can make a repro, maybe there are more externals addons that need to change.

[stevensacks]

@kasperpeulen It's happening in every project that I have.

Here's my open source Remix template where it's happening: https://github.com/gaia-react/remix

You can run npx sb@latest upgrade on it to see the issue.

My projects all have these storybook libraries. Perhaps having one of these in package.json is the cause?

"devDependencies": {
  "@storybook/addon-essentials": "8.4.2",
  "@storybook/addon-interactions": "8.4.2",
  "@storybook/addon-links": "8.4.2",
  "@storybook/blocks": "8.4.2",
  "@storybook/manager-api": "8.4.2",
  "@storybook/preview-api": "8.4.2",
  "@storybook/react": "8.4.2",
  "@storybook/react-vite": "8.4.2",
  "@storybook/test": "8.4.2",
  "@storybook/theming": "8.4.2",
  "@storybook/types": "8.4.2",
  "storybook": "8.4.2",
}

[stevensacks]

@kasperpeulen I've got a more simple repo it's happening on. My storybook addon.

https://github.com/stevensacks/storybook-react-intl

When I use npx sb@latest upgrade on this addon (built with the addon kit), it crashes.

[yannbf]

Thank you so much @stevensacks for providing a repro. I think I found the issue.

@storybook/react has a peer dependency of @storybook/test, however, @storybook/react-vite, which has a direct dependency of @storybook/react, doesn't have a peer dependency of @storybook/test, thus breaking this chain. I am making some experimentations to see if I can solve this issue!