search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.7k stars 9.33k forks source link

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

Open stevensacks opened 2 months ago

stevensacks commented 2 months ago

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 commented 2 months ago

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

stevensacks commented 2 months ago

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 commented 1 month ago

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

stevensacks commented 1 month ago

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 commented 1 month ago

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 https://github.com/storybookjs/storybook/issues/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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

seb-lean commented 1 month ago

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

image
stevensacks commented 2 weeks ago

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 commented 2 weeks ago

@stevensacks Can you give a repro for that.

We tried to fix that with this PR: https://github.com/storybookjs/storybook/pull/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 commented 2 days ago

@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",
}