[Bug]: Storybook 无法与 Yarn 4(nodeLinker: pnpm)、Vue 3、Vite 5和Storybook 8一起使用

vdgimpew  于 2个月前  发布在  Yarn
关注(0)|答案(1)|浏览(46)

描述bug

我正在使用 Yarn 4 (nodeLinker: pnpm) , Vue 3 , Vite 5 , Storybook 8 设置一个新的前端仓库。
在启动 Storybook 或构建 Storybook 时,遇到了以下错误类型。

yarn storybook dev -p 6006

20:47:14 [vite] Pre-transform error: Failed to resolve import ".store/@storybook-vue3-virtual-8d5d8463a2/package/dist/entry-preview.mjs" from "../../../virtual:/@storybook/builder-vite/vite-app.js". Does the file exist?

yarn storybook dev -p 6006(完整日志)

D:\Code\issue\vue-vite-storybook-issue>yarn storybook dev -p 6006
storybook v8.2.4

info => Starting manager..
info => Starting preview..
╭───────────────────────────────────────────────────╮
│                                                   │
│   Storybook 8.2.4 for vue3-vite started           │
│   504 ms for manager and 673 ms for preview       │
│                                                   │
│    Local:            http://localhost:6006/       │
│    On your network:  http://192.168.1.20:6006/    │
│                                                   │
╰───────────────────────────────────────────────────╯
20:47:14 [vite] Pre-transform error: Failed to resolve import ".store/@storybook-vue3-virtual-8d5d8463a2/package/dist/entry-preview.mjs" from "../../../virtual:/@storybook/builder-vite/vite-app.js". Does the file exist?
Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
20:47:14 [vite] Internal server error: Failed to resolve import ".store/@storybook-vue3-virtual-8d5d8463a2/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:84
  5  |
  6  |    const getProjectAnnotations = async (hmrPreviewAnnotationModules = []) => {
  7  |      const configs = await Promise.all([hmrPreviewAnnotationModules.at(0) ?? import('.store/@storybook-vue3-virtual-8d5d8463a2/package/dist/entry-preview.mjs'),
     |                                                                                     ^
  8  |  hmrPreviewAnnotationModules.at(1) ?? import('.store/@storybook-vue3-virtual-8d5d8463a2/package/dist/entry-preview-docs.mjs'),
  9  |  hmrPreviewAnnotationModules.at(2) ?? import('@storybook/addon-links/preview'),
      at TransformPluginContext._formatError (file:///D:/Code/issue/vue-vite-storybook-issue/node_modules/.store/vite-virtual-db36b67538/package/dist/node/chunks/dep-D8YhmIY-.js:49748:41)
      at TransformPluginContext.error (file:///D:/Code/issue/vue-vite-storybook-issue/node_modules/.store/vite-virtual-db36b67538/package/dist/node/chunks/dep-D8YhmIY-.js:49743:16)
      at normalizeUrl (file:///D:/Code/issue/vue-vite-storybook-issue/node_modules/.store/vite-virtual-db36b67538/package/dist/node/chunks/dep-D8YhmIY-.js:64333:23)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///D:/Code/issue/vue-vite-storybook-issue/node_modules/.store/vite-virtual-db36b67538/package/dist/node/chunks/dep-D8YhmIY-.js:64465:39
      at async Promise.all (index 2)
      at async TransformPluginContext.transform (file:///D:/Code/issue/vue-vite-storybook-issue/node_modules/.store/vite-virtual-db36b67538/package/dist/node/chunks/dep-D8YhmIY-.js:64392:7)
      at async PluginContainer.transform (file:///D:/Code/issue/vue-vite-storybook-issue/node_modules/.store/vite-virtual-db36b67538/package/dist/node/chunks/dep-D8YhmIY-.js:49589:18)
      at async loadAndTransform (file:///D:/Code/issue/vue-vite-storybook-issue/node_modules/.store/vite-virtual-db36b67538/package/dist/node/chunks/dep-D8YhmIY-.js:52411:27)
      at async viteTransformMiddleware (file:///D:/Code/issue/vue-vite-storybook-issue/node_modules/.store/vite-virtual-db36b67538/package/dist/node/chunks/dep-D8YhmIY-.js:62175:24)

yarn storybook build

=> Failed to build the preview
[vite]: Rollup failed to resolve import ".store/@storybook-vue3-virtual-8d5d8463a2/package/dist/entry-preview.mjs" from "/virtual:/@storybook/builder-vite/vite-app.js".

yarn storybook build(完整日志)

D:\Code\issue\vue-vite-storybook-issue>yarn storybook build
storybook v8.2.4

info => Cleaning outputDir: storybook-static
info => Loading presets
info => Building manager..
info => Manager built (334 ms)
info => Building preview..
vite v5.3.4 building for production...
✓ 15 modules transformed.
x Build failed in 134ms
=> Failed to build the preview
[vite]: Rollup failed to resolve import ".store/@storybook-vue3-virtual-8d5d8463a2/package/dist/entry-preview.mjs" from "/virtual:/@storybook/builder-vite/vite-app.js".
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:///D:/Code/issue/vue-vite-storybook-issue/node_modules/.store/vite-virtual-db36b67538/package/dist/node/chunks/dep-D8YhmIY-.js:65883:17)
    at onRollupWarning (file:///D:/Code/issue/vue-vite-storybook-issue/node_modules/.store/vite-virtual-db36b67538/package/dist/node/chunks/dep-D8YhmIY-.js:65918:5)
    at onwarn (file:///D:/Code/issue/vue-vite-storybook-issue/node_modules/.store/vite-virtual-db36b67538/package/dist/node/chunks/dep-D8YhmIY-.js:65578:7)
    at file:///D:/Code/issue/vue-vite-storybook-issue/node_modules/.store/rollup-npm-4.18.1-ff252ce141/package/dist/es/shared/node-entry.js:18483:13
    at Object.logger [as onLog] (file:///D:/Code/issue/vue-vite-storybook-issue/node_modules/.store/rollup-npm-4.18.1-ff252ce141/package/dist/es/shared/node-entry.js:20131:9)
    at ModuleLoader.handleInvalidResolvedId (file:///D:/Code/issue/vue-vite-storybook-issue/node_modules/.store/rollup-npm-4.18.1-ff252ce141/package/dist/es/shared/node-entry.js:19073:26)
    at ModuleLoader.resolveDynamicImport (file:///D:/Code/issue/vue-vite-storybook-issue/node_modules/.store/rollup-npm-4.18.1-ff252ce141/package/dist/es/shared/node-entry.js:19131:58)
    at async file:///D:/Code/issue/vue-vite-storybook-issue/node_modules/.store/rollup-npm-4.18.1-ff252ce141/package/dist/es/shared/node-entry.js:19018:32
√ Would you like to help improve Storybook by sending anonymous crash reports? ... yes

出于某种原因(优化和monorepo),我需要使用 nodeLinker: pnpm
我还尝试过 nodeLinker: node_modules 。但它导致了另一个错误,请查看我的评论:#28567(评论)

复现链接

https://github.com/issue-reproduction/vue-vite-storybook-issue

复现步骤

  1. 克隆复现仓库(分支 master )。
  2. 手动切换到 yarn 4.3.1 & node 20.15.1
  3. 运行 yarn
  4. 运行 yarn storybookyarn build-storybook

系统环境

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz
  Binaries:
    Node: 20.15.1 - ~\AppData\Local\Temp\xfs-44286f6b\node.CMD
    Yarn: 4.3.1 - ~\AppData\Local\Temp\xfs-44286f6b\yarn.CMD <----- active
    npm: 10.7.0 - ~\scoop\apps\volta\current\appdata\tools\image\node\20.15.1\npm.CMD
    pnpm: 7.19.0 - ~\scoop\apps\volta\current\appdata\tools\image\pnpm\7.19.0\bin\pnpm.CMD
  Browsers:
    Edge: Chromium (126.0.2592.102)
  npmPackages:
    @storybook/addon-essentials: ^8.2.4 => 8.2.4
    @storybook/addon-interactions: ^8.2.4 => 8.2.4
    @storybook/addon-links: ^8.2.4 => 8.2.4
    @storybook/addon-onboarding: ^8.2.4 => 8.2.4
    @storybook/blocks: ^8.2.4 => 8.2.4
    @storybook/test: ^8.2.4 => 8.2.4
    @storybook/vue3: ^8.2.4 => 8.2.4
    @storybook/vue3-vite: ^8.2.4 => 8.2.4
    storybook: ^8.2.4 => 8.2.4

其他上下文信息

  • 无响应*
fae0ux8s

fae0ux8s1#

如果你正在运行node-modules链接器,我建议你尝试删除.yarn.lock文件以及Storybook似乎生成的node_modules缓存目录。然后运行新的安装。我知道你想在pnpm上,但请告诉我这是否对其他链接器有帮助。

相关问题