[Bug]: pnpm + Vite + 8.0.0-beta.1 fails to build with "Rollup failed to resolve import "@storybook/theming"..."

[JReinhold]

Describe the bug

A setup that's based on pnpm, Vite and Storybook version 8.0.0-beta.1 can't be built, because it fails with:

=> Failed to build the preview
Error: [vite]: Rollup failed to resolve import "@storybook/theming" from "./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@storybook/blocks/dist/index.mjs".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at viteWarn (file://./node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:67037:27)
    at onRollupWarning (file://./node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:67065:9)
    at onwarn (file://./node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:66776:13)
    at file://./node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:17420:13
    at Object.logger [as onLog] (file://./node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19078:9)
    at ModuleLoader.handleInvalidResolvedId (file://./node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:18024:26)
    at file://./node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:17982:26

To Reproduce

1. npx storybook@next sandbox svelte-vite/default-ts --output issue-25964
2. cd issue-25964
3. pnpm install
4. pnpm run build-storybook
5. See error

System

Storybook Environment Info:

  System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.18.2 - ~/Library/Caches/fnm_multishells/11515_1707428355395/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/11515_1707428355395/bin/yarn
    npm: 9.8.1 - ~/Library/Caches/fnm_multishells/11515_1707428355395/bin/npm
    pnpm: 8.14.1 - ~/Library/Caches/fnm_multishells/11515_1707428355395/bin/pnpm <----- active
  Browsers:
    Chrome: 121.0.6167.160
    Edge: 121.0.2277.112
    Safari: 16.2
  npmPackages:
    @storybook/addon-essentials: ^8.0.0-beta.1 => 8.0.0-beta.1
    @storybook/addon-interactions: ^8.0.0-beta.1 => 8.0.0-beta.1
    @storybook/addon-links: ^8.0.0-beta.1 => 8.0.0-beta.1
    @storybook/blocks: ^8.0.0-beta.1 => 8.0.0-beta.1
    @storybook/components: 8.0.0-beta.1 => 8.0.0-beta.1
    @storybook/svelte: ^8.0.0-beta.1 => 8.0.0-beta.1
    @storybook/svelte-vite: ^8.0.0-beta.1 => 8.0.0-beta.1
    @storybook/test: ^8.0.0-beta.1 => 8.0.0-beta.1
    @storybook/theming: 8.0.0-beta.1 => 8.0.0-beta.1
    storybook: ^8.0.0-beta.1 => 8.0.0-beta.1

Additional context

Everything works fine in 8.0.0-beta.0, I assume I introduced this bug in https://github.com/storybookjs/storybook/pull/25925/files#diff-e3d50a086df937d7c8f41d5819f0e6d8368961c112866cc291cfe057a4fafe23R153 or maybe #25925 (but probably not).

npm and Yarn v4 also works fine, even with beta.1.

Workaround

Explicitly installing @storybook/theming@next will make the error complain about @storybook/components instead. Installing that too, will make the error go away.

[SalahAdDin]

@JReinhold This is not only an issue for vite, it happens with nextjs also.

[shilman]

@JReinhold any chance you can try this in a different package manager and/or an older version of pnpm to help debug the problem? There have been a bunch of recent pnpm-related issues all at once and I'm wondering whether it's due to a bug (or just a change?) in the latest release of pnpm?

[ndelangen]

@storybook/theming is a regular dependency of @storybook/blocks.. It doesn't make sense for it to be missing, unless some weird package hoisting issues happened:

storybook/code/ui/blocks/package.json

Line 57 in 3075818

"@storybook/theming": "workspace:*",

[aaronadamsCA]

I am seeing the same issue in a PR upgrading Storybook from 8.0.0-beta.0 to 8.0.0-beta.1. I am also using PNPM.

My specific error is Rollup failed to resolve import "@storybook/components". It occurs at the same location in @storybook/blocks.

I agree #25925 is the likely cause, because I can force the same error to happen on v8.0.0-beta.0 if I use pnpm.overrides to replace only @storybook/addon-docs with v8.0.0-beta.1:

So I think #25925 is having an unintended side effect.

[JReinhold]

I have an initial fix for it at #26024. @aaronadamsCA if you could test out the canary with npx [email protected] upgrade that would be great.

[aaronadamsCA]

Confirmed @JReinhold, that works for me! Thank you.