Error: [vite:dts] File not found: /virtual:/@storybook/builder-vite/vite-app.js

[philipp-winterle]

When running storybook build with dts plugin, the build fails due to this error.

Vite Config

 plugins: [
        dts({
          entryRoot: path.join(`./src`),
        }),
        PluginReact({
          exclude: [/virtual:/, /node_modules/],
        }),
      ],

Error

❯ storybook build
@storybook/cli v7.0.0-alpha.35

info => Cleaning outputDir: /storybook-static
info => Loading presets
info => Loading presets
info Found existing addon {"name":"@storybook/addon-docs","options":{"configureJSX":true,"babelOptions":{},"sourceLoaderOptions":null,"transcludeMarkdown":true}}, skipping.
info => Loading presets
info Found existing addon {"name":"@storybook/addon-docs","options":{"configureJSX":true,"babelOptions":{},"sourceLoaderOptions":null,"transcludeMarkdown":true}}, skipping.
info => Building manager..
WARN unable to find package.json for @vitejs/plugin-react
WARN unable to find package.json for postcss-preset-env
WARN unable to find package.json for sass
WARN unable to find package.json for vite-plugin-css-injected-by-js
WARN unable to find package.json for vite-plugin-dts
WARN unable to find package.json for vite-tsconfig-paths
info => Manager built (131 ms)

[vite:dts] You building not a library that may not need to generate declaration files.

vite v3.1.7 building for production...
✓ 1 modules transformed.

[vite:dts] Start generate declaration files...
[vite:dts] Declaration files built in 1054ms.

[vite:dts] File not found: /virtual:/@storybook/builder-vite/vite-app.js
file: /virtual:/@storybook/builder-vite/vite-app.js
ERR! Error: File not found: /virtual:/@storybook/builder-vite/vite-app.js

Versions

"vite-plugin-dts": "^1.6.5",
"@storybook/addon-essentials": "7.0.0-alpha.35",
"@storybook/addon-links": "7.0.0-alpha.35",
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/cli": "7.0.0-alpha.35",
"@storybook/react": "7.0.0-alpha.35",
"@storybook/react-vite": "7.0.0-alpha.34",
"@storybook/theming": "7.0.0-alpha.35",
"storybook": "^7.0.0-alpha.35",

[qmhc]

Did you exclude virtual: in tsconfig.josn ?

[philipp-winterle]

Yes, I tried with and without. No change

"exclude": ["**/node_modules", "virtual:"]

[qmhc]

Why exclude virtual:? It there any wrong with this?

[philipp-winterle]

I did not exclude it in the beginning. I tried it after your comment. It is not in there in my default config. Just testing if that helps. Excluding does not change anything.

Sorry for not being clear enough

[qmhc]

Would you share your full vite.config.ts and tsconfig.json? Will be better if you can provide a reproduction.

[philipp-winterle]

Vite Config Export for all packages

import path from 'path';
import { fileURLToPath } from 'url';
import { defineConfig, UserConfigExport } from 'vite';
import dts from 'vite-plugin-dts';
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';

const rootDir = fileURLToPath(new URL('.', import.meta.url).toString());

interface Options {
  workingDirectory: string;
  entryFilePath?: string;
  packageInfo?: Object;
}

export default ({
  workingDirectory,
  packageInfo = {},
  entryFilePath = '',
}: Options): UserConfigExport => {
  let packageNameArr: Array<string> = [];

  if (packageInfo.dependencies) {
    packageNameArr = Object.keys(packageInfo.dependencies).filter((pkgName: string) =>
      pkgName.startsWith('@check-react'),
    );
  }

  return defineConfig({
    logLevel: 'info',
    build: {
      cssCodeSplit: false,
      emptyOutDir: true,
      sourcemap: true,
      target: 'modules',
      outDir: 'dist',
      manifest: true,
      lib: {
        entry: path.join('.', 'src', 'index.tsx'),
        name: `check_${path.basename(workingDirectory).replaceAll('-', '_')}`,
        formats: ['es'],
        fileName: 'index',
      },
      rollupOptions: {
        output: {
          exports: 'named',
          globals: {
            react: 'React',
            'react-dom': 'ReactDOM',
          },
        },
        external: ['react', 'react-dom', ...packageNameArr],
      },
    },
    plugins: [
      dts({
        entryRoot: path.join('./src'),
        tsConfigFilePath: path.resolve(rootDir, './tsconfig.json'),
        rollupTypes: false,
        insertTypesEntry: true, // uses package.json types path
        staticImport: false, // Whether transform dynamic import to static
      }),
      cssInjectedByJsPlugin(),
    ],
    css: {
      modules: {
        localsConvention: 'dashes',
      },
    },
  });
};

tsconfig.json

{
  "rootDir": ".",
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "declaration": true,
    "emitDeclarationOnly": true,
    "esModuleInterop": false,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es2022", "ESNext", "DOM"],
    "module": "ES2022",
    "moduleResolution": "node",
    "noEmit": false,
    "removeComments": true,
    "resolveJsonModule": true,
    "rootDir": ".",
    "rootDirs": ["src", "dist"],
    "skipLibCheck": false,
    "strict": true,
    "sourceMap": true,
    "target": "ES2022"
  },
  "include": [
    "./packages/**/src/**/*",
    "./src/**/*",
    "**/build-check.ts",
    "declarations.d.ts",
    "./jest.config.ts"
  ],
  "exclude": ["**/node_modules"]
}

[qmhc]

I guess you might be using some types form the virtual imports. You can try to declare a module for these virtual imports:

declare module '/virtual:/@storybook/builder-vite/vite-app.js' {
  const someExports: any
  export { someExports }
}

[philipp-winterle]

actually I don't have any virtual types or virtual imports declared myself. I only have type declarations for scss modules. That's it.

Tested it: not working