使用pnpm时@storybook/builder-vite出现依赖解析故障

问题场景 #

使用npm或yarn安装依赖无异常，但通过pnpm安装时，@storybook/builder-vite的嵌套依赖未被正确提升，触发如下错误：

[vite]: Rollup failed to resolve import "@storybook/preview-web" from "../../../../../../virtual:/@storybook/builder-vite/vite-app.js"
重新安装依赖后问题仍未解决。

解决方案 #

1. 配置pnpm强制提升指定依赖 #

在项目根目录的.npmrc文件中添加以下规则，强制pnpm提升所有@storybook前缀的嵌套依赖：

public-hoist-pattern[]=@storybook/*

保存后删除node_modules和pnpm-lock.yaml，重新执行pnpm install。

2. 显式声明依赖 #

直接在项目package.json中添加@storybook/preview-web为顶层依赖（版本需匹配当前Storybook版本）：

{
  "dependencies": {
    "@storybook/preview-web": "x.x.x"
  }
}

执行pnpm install后，Rollup即可正常解析该模块。

3. 升级pnpm到最新稳定版 #

部分旧版pnpm存在嵌套依赖提升的兼容性问题，执行以下命令升级：

pnpm add -g pnpm@latest

升级完成后重新安装依赖。

内容的提问来源于stack exchange，提问作者Anastasiia Solop