This is a repo for the reproduction of a vite bug that occurs with the latest Storybookjs package (as of right now, 7.0.0-alpha.38).
Vite has also been updated to version 3.2.0-beta.2, to make sure all recent bug fixes are included.
Because storybook sets its own vite dependency, i have used yarn's "resolutions" option to set the next vite to override any sub vite dependencies.
When trying to run yarn storybook, storybook does start the server and at least runs the main skeleton of the app, but no stories or pages are loaded.
In the terminal the following error and output is given:
yarn storybook
yarn run v1.22.19
warning package.json: No license field
$ storybook dev -p 6006
@storybook/cli v7.0.0-alpha.38
info => Loading presets
info => Loading presets
info => Loading presets
info => Starting manager..
(node:26224) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
╭─────────────────────────────────────────────────────╮
│ │
│ Storybook 7.0.0-alpha.38 for vue3-vite started │
│ 3.27 s for manager and 4.94 s for preview │
│ │
│ Local: http://localhost:6006/ │
│ On your network: http://10.253.254.250:6006/ │
│ │
╰─────────────────────────────────────────────────────╯
3:52:12 PM [vite] error while updating dependencies:
Error: ENOENT: no such file or directory, rename 'C:\vueStorybook\vue-storybook-repo\node_modules\.cache\.vite-storybook\deps_temp' -> 'C:\vueStorybook\vue-storybook-repo\node_modules\.cache\.vite-storybook\deps'
in the browser i also get the following errors in the console:
Failed to load resource: the server responded with a status of 404 (Not Found)
:6006/sb-addons%5Caddon-controls%5Cmanager.mjs:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:6006/sb-addons%5Caddon-actions%5Cmanager.mjs:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:6006/sb-addons%5Caddon-backgrounds%5Cmanager.mjs:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:6006/sb-addons%5Caddon-viewport%5Cmanager.mjs:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:6006/sb-addons%5Caddon-toolbars%5Cmanager.mjs:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:6006/sb-addons%5Caddon-measure%5Cmanager.mjs:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:6006/sb-addons%5Caddon-outline%5Cmanager.mjs:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:6006/sb-addons%5Caddon-interactions%5Cmanager.mjs:1 Failed to load resource: the server responded with a status of 404 (Not Found)
client.ts:19 [vite] connecting...
client.ts:134 [vite] connected.
:6006/node_modules/.cache/.vite-storybook/deps/@storybook_vue3-vite.js?v=907fe626:1 Failed to load resource: the server responded with a status of 504 (Gateway Timeout)
If the error doesnt show up right away, delete the .cache folder from node_modules and run yarn storybook again. The error should now be consistent.
I dont know if this is an actual workaround because it still doesnt quite work, but this procedure will at least allow storybook to successfully load stories and pages. We can now see the components, however i cant do much (likely due to the files that wont load):
Workaround procedure
-
Find the file
node_modules/vite/dist/node/chunks/dep-0856a44a.js -
Go to line
42613that has the follow snippet:42605: const processingResult = { 42606: metadata, 42607: async commit() { 42608: // Write metadata file, delete `deps` folder and rename the 42609: `processing` folder to `deps` 42610: // Processing is done, we can now replace the depsCacheDir with 42611: processingCacheDir 42612: // Rewire the file paths from the temporal processing dir to the 4261: final deps cache dir 42613: await removeDir(depsCacheDir); 42614: await renameDir(processingCacheDir, depsCacheDir); 42615: }, 42616: cancel() { 42617: fs$l.rmSync(processingCacheDir, { recursive: true, force: true }); 42618: }, 42619: };
- stop build process, if it's running.
- Comment out line
42613. - Run
yarn storybookagain - Storybook now loads the front page successfuly and you can click the pages and see the stories/components. Also the follow is output from the terminal, instead of error:
PS C:\vueStorybook\vue-storybook-repo> yarn storybook yarn run v1.22.19 warning package.json: No license field $ storybook dev -p 6006 @storybook/cli v7.0.0-alpha.38 info => Loading presets info => Loading presets info => Loading presets info => Starting manager.. (node:28288) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time (Use `node --trace-warnings ...` to show where the warning was created) ╭─────────────────────────────────────────────────────╮ │ │ │ Storybook 7.0.0-alpha.38 for vue3-vite started │ │ 2.81 s for manager and 3.5 s for preview │ │ │ │ Local: http://localhost:6006/ │ │ On your network: http://10.253.254.250:6006/ │ │ │ ╰─────────────────────────────────────────────────────╯ 4:14:02 PM [vite] ✨ new dependencies optimized: @storybook/vue3-vite, @storybook/vue3/preview, @storybook/addon-links/preview, @storybook/addon-docs/preview, @storybook/addon-actions/preview, ...and 5 more 4:14:02 PM [vite] ✨ optimized dependencies changed. reloading
OS: Windows 11
node: v18.9.1
yarn: v1.22.19
PS C:\vueStorybook\vue-storybook-repo> yarn list vite
yarn list v1.22.19
└─ [email protected]PS C:\vueStorybook\vue-storybook-repo> yarn list storybook
yarn list v1.22.19
└─ [email protected]PS C:\vueStorybook\vue-storybook-repo> yarn list @storybook/*
yarn list v1.22.19
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
│ ├─ @storybook/[email protected]
│ ├─ @storybook/[email protected]
│ ├─ @storybook/[email protected]
│ ├─ @storybook/[email protected]
│ ├─ @storybook/[email protected]
│ ├─ @storybook/[email protected]
│ ├─ @storybook/[email protected]
│ ├─ @storybook/[email protected]
│ └─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
└─ @storybook/[email protected]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent