[Bug]: PNPM/Vite Failed to resolve import "@storybook/global"

[omarkhatibco]

Describe the bug

after updating to v7.0.14 I got this error message:

10:43:44 AM [vite] Internal server error: Failed to resolve import "@storybook/global" from "../../../../../virtual:/@storybook/builder-vite/setup-addons.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /virtual:/@storybook/builder-vite/setup-addons.js:1:25
  1  |  import { global } from '@storybook/global';
     |                          ^
  2  |      const { createChannel: createPostMessageChannel } = __STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__;
  3  |      const { createChannel: createWebSocketChannel } = __STORYBOOK_MODULE_CHANNEL_WEBSOCKET__;
      at formatError (file:///Users/omarkhatib/Documents/GitHub/fusion-you/node_modules/.pnpm/vite@4.3.8_@types+node@18.16.0_less@4.1.3/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:42645:46)
      at TransformContext.error (file:///Users/omarkhatib/Documents/GitHub/fusion-you/node_modules/.pnpm/vite@4.3.8_@types+node@18.16.0_less@4.1.3/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:42641:19)
      at normalizeUrl (file:///Users/omarkhatib/Documents/GitHub/fusion-you/node_modules/.pnpm/vite@4.3.8_@types+node@18.16.0_less@4.1.3/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:40508:33)
      at async file:///Users/omarkhatib/Documents/GitHub/fusion-you/node_modules/.pnpm/vite@4.3.8_@types+node@18.16.0_less@4.1.3/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:40651:47
      at async Promise.all (index 0)
      at async TransformContext.transform (file:///Users/omarkhatib/Documents/GitHub/fusion-you/node_modules/.pnpm/vite@4.3.8_@types+node@18.16.0_less@4.1.3/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:40577:13)
      at async Object.transform (file:///Users/omarkhatib/Documents/GitHub/fusion-you/node_modules/.pnpm/vite@4.3.8_@types+node@18.16.0_less@4.1.3/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:42919:30)
      at async loadAndTransform (file:///Users/omarkhatib/Documents/GitHub/fusion-you/node_modules/.pnpm/vite@4.3.8_@types+node@18.16.0_less@4.1.3/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:53385:29)
^C ELIFECYCLE  Command failed.

To Reproduce

Just update to v7.0.14

System

Environment Info:

  System:
    OS: macOS 13.3.1
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
  Binaries:
    Node: 18.10.0 - ~/Library/Caches/fnm_multishells/41563_1684771105350/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.2 - ~/Library/Caches/fnm_multishells/41563_1684771105350/bin/npm
  Browsers:
    Chrome: 113.0.5672.126
    Safari: 16.4
  npmPackages:
    @storybook/addon-a11y: ^7.0.14 => 7.0.14 
    @storybook/addon-essentials: ^7.0.14 => 7.0.14 
    @storybook/addon-interactions: ^7.0.14 => 7.0.14 
    @storybook/addon-links: ^7.0.14 => 7.0.14 
    @storybook/addon-storysource: ^7.0.14 => 7.0.14 
    @storybook/addon-styling: ^1.0.8 => 1.0.8 
    @storybook/blocks: ^7.0.14 => 7.0.14 
    @storybook/react: ^7.0.14 => 7.0.14 
    @storybook/react-vite: ^7.0.14 => 7.0.14 
    @storybook/testing-library: ^0.1.0 => 0.1.0

Additional context

No response

[flayks]

Same issue since 7.0.14. Rolled back to 7.0.12 to not break my builds.

[shilman]

Good golly!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.21 containing PR #22700 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

[shilman]

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.15 containing PR #22700 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade

[flayks]

I still have issues building Storybook using 7.0.15:

ERR! Error: [vite]: Rollup failed to resolve import "@storybook/global" from "/virtual:/@storybook/builder-vite/setup-addons.js".
ERR! This is most likely unintended because it can break your application at runtime.
ERR! If you do want to externalize this module explicitly add it to
ERR! `build.rollupOptions.external`
ERR!     at viteWarn (file:///Users/flayks/sites/website/node_modules/.pnpm/vite@4.3.8_@types+node@20.2.3/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:46597:23)
ERR!     at onRollupWarning (file:///Users/flayks/sites/website/node_modules/.pnpm/vite@4.3.8_@types+node@20.2.3/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:46621:9)
ERR!     at onwarn (file:///Users/flayks/sites/website/node_modules/.pnpm/vite@4.3.8_@types+node@20.2.3/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:46368:13)
ERR!     at Object.onwarn (file:///Users/flayks/sites/website/node_modules/.pnpm/rollup@3.23.0/node_modules/rollup/dist/es/shared/node-entry.js:25419:13)
ERR!     at ModuleLoader.handleInvalidResolvedId (file:///Users/flayks/sites/website/node_modules/.pnpm/rollup@3.23.0/node_modules/rollup/dist/es/shared/node-entry.js:23992:26)
ERR!     at file:///Users/flayks/sites/website/node_modules/.pnpm/rollup@3.23.0/node_modules/rollup/dist/es/shared/node-entry.js:23952:26

[IanVS]

Sorry y'all! If you want to use the latest Storybook, you can add @storybook/global to your package.json as a workaround for now, but I've opened a PR which will fix it as well, if you want to stay on 7.0.13 for now.

[ndelangen]

@IanVS How does my PR not fix the problem? I'm confused.

[IanVS]

Because pnpm does not hoist / provide access to the @storybook/global nested inside @storybook/builder-vite, since the context where it is being imported is a virtual browser module. Same reason we have to go through all sorts of other hoops for pnpm in the vite builder.

[ndelangen]

And vite also doesn't support absolute paths, so we can't resolve it ahead of time?

[IanVS]

@ndelangen correct. But, why do you want to use a dependency for this? We use window on other lines in the same code, and this only runs in a browser (see my PR). If we wanted to make it work in servers, we could use globalThis instead, but I chose window to stay consistent with the other code in that file.

[omarkhatibco]

I also can confirm is not working on v7.0.15

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.22 containing PR #22709 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

[shilman]

¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.17 containing PR #22709 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade