[Bug] Installing StoryBook to a Vite3/Vue3 project fails

[ledermann]

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

templatus/templatus-vue#1215

Participation

• I am willing to submit a pull request for this issue.

[PunkSage]

@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

[ledermann]

I haven't tried it since, sorry.

[FernetB]

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?

[IanVS]

@FernetB I would guess you're running into #535. It's an issue in vite-plugin-eslint that it does not support virtual files.