storybookjs/storybook

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

Open

#29620 opened on Nov 14, 2024

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

Description

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

Contributor guide

Tech stack
typescriptvitenodejs
Domain
frontendbuild systemdeveloper experience
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
TypeScriptNode.js module resolutionVite knowledge
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
55
Research direction
The bug is in `code/core/src/common/utils/strip abs node modules path.ts` which incorrectly strips leading `node modules/` components even when the path goes through a symlinked `.store` directory under Yarn PnP linker. The fix likely involves checking if the path contains `.store/` and adjusting the stripping logic or skipping it entirely. The reproduction at https://github.com/ethanwu10/sb yarn pnpm vite repro can be used to test the fix.