Open phamhongphuc opened 1 month ago
If your running node-modules
linker, I suggest trying to delete your .yarn.lock
file and the cached directory in node_modules
that Storybook seems to generate. Then run a new install. I know you wish to be on pnpm
, but let me know if this helps for the other linker.
the same issue for me but with Yarn(pnpm), Vite, React stack
Storybook Environment Info:
System:
OS: macOS Sonoma Version 14.5
CPU: Apple M1 Max
Binaries:
Node: v20.15.1
Yarn: 4.3.1
npm: 10.7.0
npmPackages:
"@storybook/addon-a11y": "^8.2.6",
"@storybook/addon-actions": "^8.2.6",
"@storybook/addon-controls": "^8.2.6",
"@storybook/addon-docs": "^8.2.6",
"@storybook/addon-interactions": "^8.2.6",
"@storybook/addon-links": "^8.2.6",
"@storybook/addon-themes": "^8.2.6",
"@storybook/builder-vite": "^8.2.6",
"@storybook/preview-api": "^8.2.6",
"@storybook/react": "^8.2.6",
"@storybook/react-vite": "^8.2.6",
"@storybook/test": "^8.2.6",
"storybook": "^8.2.6",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"vite": "^5.3.2",
Describe the bug
I'm setting up a new front-end repo with
Yarn 4 (nodeLinker: pnpm)
,Vue 3
,Vite 5
,Storybook 8
. And I encounter the following error type when starting Storybook or build Storybook.yarn storybook dev -p 6006
yarn storybook dev -p 6006
(full log)``` 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
yarn storybook build
(full log)``` 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 ```
For some reason (optimization and monorepo) I need to use
nodeLinker: pnpm
.I also tried
nodeLinker: node_modules
. But it leads to another error, check my comment: https://github.com/storybookjs/storybook/issues/28567#issuecomment-2230911682Reproduction link
https://github.com/issue-reproduction/vue-vite-storybook-issue
Reproduction steps
master
).yarn 4.3.1
&node 20.15.1
manually.yarn
.yarn storybook
oryarn build-storybook
.System
Additional context
No response