storybookjs/storybook

[Bug]: bare import path resolution doesn't work under Yarn PNPM linker

Open

#29,620 opened on 2024年11月14日

GitHub で見る
 (2 comments) (1 reaction) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
bugcorehelp wantedpnpmyarn

説明

Describe the bug

SB attempts to strip all leading node_modules/ components off of the path of an import to get Vite to bundle correctly: https://github.com/storybookjs/storybook/blob/33e439766251689d3b30be4f532d44294a023c16/code/core/src/common/utils/strip-abs-node-modules-path.ts#L9-L17

This doesn't work correctly under the Yarn PNPM linker, which constructs a node_modules tree via symlinks into a node_modules/.store directory. So, all packages are stored under /node_modules/.store/<packagename>-virtual-<hash>/package/, and require.resolve will return absolute paths into here. Thus, stripAbsNodeModulesPath is called since node_modules is in the path, and ti will return a path like .store/..., which is not a valid import path. Vite then throws errors about these paths:

3:37:05 PM [vite] Pre-transform error: Failed to resolve import ".store/@storybook-react-virtual-d2ec5c3452/package/dist/entry-preview.mjs" from "/virtual:/@storybook/builder-vite/vite-app.js". Does the file exist?
3:37:05 PM [vite] Internal server error: Failed to resolve import ".store/@storybook-react-virtual-d2ec5c3452/package/dist/entry-preview.mjs" from "/virtual:/@storybook/builder-vite/vite-app.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /virtual:/@storybook/builder-vite/vite-app.js:7:81
  5  |      
  6  |    const getProjectAnnotations = async (hmrPreviewAnnotationModules = []) => {
  7  |      const configs = await Promise.all([hmrPreviewAnnotationModules[0] ?? import('.store/@storybook-react-virtual-d2ec5c3452/package/dist/entry-preview.mjs'),
     |                                                                                  ^
  8  |  hmrPreviewAnnotationModules[1] ?? import('.store/@storybook-react-virtual-d2ec5c3452/package/dist/entry-preview-docs.mjs'),

Reproduction link

https://github.com/ethanwu10/sb-yarn-pnpm-vite-repro

Reproduction steps

  1. Clone repro
  2. Run yarn storybook
  3. Observe errors from Vite + storybook iframe does not load

System

System:
    OS: macOS 14.7
    CPU: (10) arm64 Apple M2 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.1.0 - /private/var/folders/44/y4hzbjt52nv8ddgrvy_p85g00000gn/T/xfs-d59be415/node
    Yarn: 4.5.1 - /private/var/folders/44/y4hzbjt52nv8ddgrvy_p85g00000gn/T/xfs-d59be415/yarn <----- active
    npm: 10.9.0 - /opt/homebrew/bin/npm
  Browsers:
    Safari: 18.0
  npmPackages:
    @storybook/addon-essentials: ^8.4.4 => 8.4.4 
    @storybook/addon-interactions: ^8.4.4 => 8.4.4 
    @storybook/addon-onboarding: ^8.4.4 => 8.4.4 
    @storybook/blocks: ^8.4.4 => 8.4.4 
    @storybook/react: ^8.4.4 => 8.4.4 
    @storybook/react-vite: ^8.4.4 => 8.4.4 
    @storybook/test: ^8.4.4 => 8.4.4 
    eslint-plugin-storybook: ^0.11.0 => 0.11.0 
    storybook: ^8.4.4 => 8.4.4

Additional context

No response

コントリビューターガイド