builder-vite
builder-vite copied to clipboard
[Bug] Installing StoryBook to a Vite3/Vue3 project fails
What version of vite
are you using?
3.0.9
System info and storybook versions
System:
OS: macOS 12.5.1
CPU: (20) arm64 Apple M1 Ultra
Binaries:
Node: 18.7.0 - /opt/homebrew/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.15.0 - /opt/homebrew/bin/npm
Browsers:
Chrome: 104.0.5112.101
Firefox: 104.0
Safari: 15.6.1
npmPackages:
@storybook/addon-actions: ^6.5.10 => 6.5.10
@storybook/addon-essentials: ^6.5.10 => 6.5.10
@storybook/addon-interactions: ^6.5.10 => 6.5.10
@storybook/addon-links: ^6.5.10 => 6.5.10
@storybook/builder-vite: ^0.2.2 => 0.2.2
@storybook/testing-library: ^0.0.13 => 0.0.13
@storybook/vue3: ^6.5.10 => 6.5.10
Describe the Bug
After installing Storybook to a Vite3/Vue3/Rails project, starting StoryBook fails with this message:
yarn run v1.22.19
$ start-storybook -p 6006
info @storybook/vue3 v6.5.10
info
info => Loading presets
info => Using cached manager
(node:33134) 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 6.5.10 for Vue3 started │
│ 349 ms for preview │
│ │
│ Local: http://localhost:6006/ │
│ On your network: http://169.254.61.25:6006/ │
│ │
╰────────────────────────────────────────────────────╯
07:13:34 [vite] Internal server error: Failed to resolve import "@storybook/vue3/dist/esm/client/docs/config" from "../../../../virtual:/@storybook/builder-vite/vite-app.js". Does the file exist?
Plugin: vite:import-analysis
File: /virtual:/@storybook/builder-vite/vite-app.js
6 | const getProjectAnnotations = async () =>
7 | composeConfigs(await Promise.all([import('@storybook/vue3/dist/esm/client/preview/config'),
8 | import('@storybook/vue3/dist/esm/client/docs/config'),
| ^
9 | import('@storybook/addon-links/preview.js'),
10 | import('@storybook/addon-docs/preview.js'),
at formatError (file:///Users/ledermann/Projects/templatus-vue/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:35330:46)
at TransformContext.error (file:///Users/ledermann/Projects/templatus-vue/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:35326:19)
at normalizeUrl (file:///Users/ledermann/Projects/templatus-vue/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:40255:33)
at async TransformContext.transform (file:///Users/ledermann/Projects/templatus-vue/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:40389:47)
at async Object.transform (file:///Users/ledermann/Projects/templatus-vue/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:35579:30)
at async loadAndTransform (file:///Users/ledermann/Projects/templatus-vue/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:39888:29)
07:13:34 [vite] Internal server error: Failed to resolve import "@storybook/vue3/dist/esm/client/docs/config" from "../../../../virtual:/@storybook/builder-vite/vite-app.js". Does the file exist?
Plugin: vite:import-analysis
File: /virtual:/@storybook/builder-vite/vite-app.js
6 | const getProjectAnnotations = async () =>
7 | composeConfigs(await Promise.all([import('@storybook/vue3/dist/esm/client/preview/config'),
8 | import('@storybook/vue3/dist/esm/client/docs/config'),
| ^
9 | import('@storybook/addon-links/preview.js'),
10 | import('@storybook/addon-docs/preview.js'),
at formatError (file:///Users/ledermann/Projects/templatus-vue/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:35330:46)
at TransformContext.error (file:///Users/ledermann/Projects/templatus-vue/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:35326:19)
at normalizeUrl (file:///Users/ledermann/Projects/templatus-vue/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:40255:33)
at async TransformContext.transform (file:///Users/ledermann/Projects/templatus-vue/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:40389:47)
at async Object.transform (file:///Users/ledermann/Projects/templatus-vue/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:35579:30)
at async loadAndTransform (file:///Users/ledermann/Projects/templatus-vue/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:39888:29) (x2)
It seems it tries to require a file named @storybook/vue3/dist/esm/client/docs/config
which does not exist in the package.
To demonstrate the issue, I created a PR to my repo.
Link to Minimal Reproducible Example
https://github.com/templatus/templatus-vue/pull/1215
Participation
- [ ] I am willing to submit a pull request for this issue.
@ledermann Any progress with resolving the issue? I've got the same problems while using vite/4.1.4 darwin-arm64 node-v16.14.2
I haven't tried it since, sorry.
I have the same issue with storybook 7 and vite 4.3.2 main.ts
import { loadConfigFromFile, mergeConfig } from "vite";
import eslint from "vite-plugin-eslint";
const path = require("path");
module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"storybook-addon-mock",
"storybook-dark-mode",
],
framework: {
name: "@storybook/react-vite",
options: {},
},
core: {
builder: "@storybook/builder-vite",
},
features: {
storyStoreV7: false,
},
async viteFinal(config, { configType }) {
const response = await loadConfigFromFile(
path.resolve(__dirname, "../vite.config.ts")
);
return mergeConfig(config, {
...response?.config,
plugins: [
eslint({
exclude: ["**/virtual:/**", "**/node_modules/**"],
}),
],
});
},
};
Someone has any clue of what could be the problem?
@FernetB I would guess you're running into https://github.com/storybookjs/builder-vite/issues/535. It's an issue in vite-plugin-eslint that it does not support virtual files.