@storybook/experimental-nextjs-vite - no such file or directory 'virtual:next-image'

[JH1ller]

Summary

Tried migrating from webpack to vite using the new @storybook/experimental-nextjs-vite framework.
However, we're getting a bunch of these errors:

4:12:28 PM [vite] Internal server error: ENOENT: no such file or directory, open 'virtual:next-image'
search-storybook:storybook:       at async open (node:internal/fs/promises:639:25)
search-storybook:storybook:       at async Object.readFile (node:internal/fs/promises:1249:14)
search-storybook:storybook:       at async LoadPluginContext.load (file:///Users/jstn/development/search/node_modules/vite-plugin-svgr/dist/index.js:15:33)
search-storybook:storybook:       at async PluginContainer.load (file:///Users/jstn/development/search/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:49000:22)
search-storybook:storybook:       at async loadAndTransform (file:///Users/jstn/development/search/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:51806:22)
search-storybook:storybook:       at async viteTransformMiddleware (file:///Users/jstn/development/search/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:61823:24) (x5)

Does anyone have an idea what the issue could be?

Additional information

This is our main.ts file:

import { dirname, join } from 'node:path';
import { StorybookConfig } from '@storybook/experimental-nextjs-vite';
import { version } from '../../../packages/components/package.json';

function getAbsolutePath(value: string): string {
  return dirname(require.resolve(join(value, 'package.json')));
}

const config: StorybookConfig = {
  stories: [
    {
      directory: '../../../packages/components/src/components',
      files: '**/*.stories.*',
      titlePrefix: `Components v${version}`,
    },
  ],
  addons: [
    getAbsolutePath('@storybook/addon-links'),
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@storybook/addon-docs'),
    getAbsolutePath('@storybook/addon-themes'),
    getAbsolutePath('@storybook/addon-a11y'),
    getAbsolutePath('storybook-react-i18next'),
  ],
  framework: getAbsolutePath('@storybook/experimental-nextjs-vite'),
  staticDirs: ['../assets'],
  core: {
    disableTelemetry: true,
  },
};

export default config;

And this is our vite.config.ts file:

import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import svgr from 'vite-plugin-svgr';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
    plugins: [svgr({ include: '**/*.svg' }), tsconfigPaths({ root: resolve(__dirname, '../../../packages/components') })],
})

Create a reproduction

No response

[valentinpalkovic]

Hi @JH1ller

Which Next.js version are you using?

[JH1ller]

Hey there, we're using 14.1.0

[valentinpalkovic]

Can you try to put together a minimal reproduction? https://storybook.new

[epegzz]

I encounter the same issue. Here's a minimal reproduction:

https://stackblitz.com/edit/github-xwh8ft-dsrj6w?file=.storybook%2Fmain.ts

I added a src/stories/test.stories.tsx file that imports a SVG file. I would expect it to import it as a react component, but instead it results in this error:

7:51:57 PM [vite] Internal server error: ENOENT: no such file or directory, open 'virtual:next-image'
  Plugin: vite-plugin-svgr
  File: virtual:next-image?imagePath=/home/projects/github-xwh8ft-dsrj6w/src/stories/test.svg
  
7:51:57 PM [vite] Pre-transform error: ENOENT: no such file or directory, open 'virtual:next-image'