[Bug]: /virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files

[valentinpalkovic]

Describe the bug

When starting or building Storybook in a Vite project, the following lines are logged to the terminal:

Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files

In Vite 4 projects, even more files might be affected.

Reproduction steps

1. Initialize Storybook in a Vite Project
2. Start Storybook

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
To resolve the issue with missing source files in sourcemaps for /virtual:/@storybook/builder-vite/setup-addons.js and /virtual:/@storybook/builder-vite/vite-app.js, follow these steps:

1. Check Vite Configuration: Ensure that the Vite configuration in vite-config.ts includes proper handling for source maps.

// vite-config.ts
export async function commonConfig(options: Options, _type: PluginConfigType): Promise<ViteInlineConfig> {
  const configEnv = _type === 'development' ? configEnvServe : configEnvBuild;
  const { loadConfigFromFile, mergeConfig } = await import('vite');

  const { viteConfigPath } = await getBuilderOptions<BuilderOptions>(options);
  const projectRoot = path.resolve(options.configDir, '..');

  const { config: { build: buildProperty = undefined, ...userConfig } = {} } =
    (await loadConfigFromFile(configEnv, viteConfigPath, projectRoot)) ?? {};

  const sbConfig: InlineConfig = {
    configFile: false,
    cacheDir: resolvePathInStorybookCache('sb-vite', options.cacheKey),
    root: projectRoot,
    base: './',
    plugins: await pluginConfig(options),
    resolve: {
      conditions: ['storybook', 'stories', 'test', 'browser', 'import', 'module', 'default'],
      preserveSymlinks: isPreservingSymlinks(),
      alias: {
        assert: require.resolve('browser-assert'),
      },
    },
    envPrefix: userConfig.envPrefix ? ['STORYBOOK_'] : ['VITE_', 'STORYBOOK_'],
    build: {
      target: buildProperty?.target,
      sourcemap: true, // Ensure sourcemap is enabled
    },
  };

  const config: ViteConfig = mergeConfig(userConfig, sbConfig);

  return config;
}

2. Verify Plugin Setup: Ensure that the plugins used in pluginConfig handle source maps correctly.

// vite-config.ts
export async function pluginConfig(options: Options) {
  const frameworkName = await getFrameworkName(options);
  const build = await options.presets.apply('build');

  const externals: Record<string, string> = globalsNameReferenceMap;

  if (build?.test?.disableBlocks) {
    externals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__';
  }

  const plugins = [
    codeGeneratorPlugin(options),
    await csfPlugin(options),
    await injectExportOrderPlugin(),
    await stripStoryHMRBoundary(),
    {
      name: 'storybook:allow-storybook-dir',
      enforce: 'post',
      config(config) {
        if (config?.server?.fs?.allow) {
          config.server.fs.allow.push('.storybook');
        }
      },
    },
    await externalGlobalsPlugin(externals),
    pluginWebpackStats({ workingDir: process.cwd() }),
  ] as PluginOption[];

  if (frameworkName === '@storybook/glimmerx-vite') {
    const plugin = require('vite-plugin-glimmerx/index.cjs');
    plugins.push(plugin.default());
  }

  return plugins;
}

3. Update index.ts: Ensure that the Vite server is correctly configured to handle source maps.

// index.ts
export const start: ViteBuilder['start'] = async ({ startTime, options, router, server: devServer }) => {
  server = await createViteServer(options as Options, devServer);

  const previewResolvedDir = join(corePath, 'dist/preview');
  const previewDirOrigin = previewResolvedDir;

  router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
  router.use(iframeMiddleware(options as Options, server));
  router.use(server.middlewares);

  return {
    bail,
    stats: {
      toJson: () => {
        throw new NoStatsForViteDevError();
      },
    },
    totalTime: process.hrtime(startTime),
  };
};

These changes should ensure that the source maps are correctly generated and point to the correct source files.

References

/code/builders/builder-vite/src/index.ts
/code/builders/builder-vite/src/vite-config.ts
/code/builders/builder-vite
/code/builders

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

[kerryj89]

Upgraded from 8.0.4 to 8.2.4 today and am now running into this issue.

Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files
Sourcemap for "/Users/kerry/dev/some-design-worktree/components/projects/components/node_modules/.cache/storybook/c698b8ade20774e74879ccaec4f97d28db2fdf6f7fb93649c7d24018c42360de/sb-vite/deps/chunk-4UF4PDC3.js" points to missing source files

...and so on

@valentinpalkovic believes the docs error I'm facing inside here has no relation to missing source files, so de-emphasizing it here

I am guessing this is what's causing my `parameters.docs.source.transform`'s `code` parameter to be undefined and basically error out with the following in any of my component's docs page:

[valentinpalkovic]

@Loic57 Can you create another GitHub issue related to your HMR issue in Stencil?

[valentinpalkovic]

@kerryj89 I don't think your issue is related to the issue of missing source files. Can you please create another GitHub issue?

[David05500]

I was facing the same issue today after upgrading to 8.2.4
Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files

So Ive downgraded back to 7.6.20

[valentinpalkovic]

@David05500 Except of having a nasty warning in the terminal Storybook should still function. I wouldn’t recommend to downgrade just because of it. You could upgrade to 8.1.11. This version is not containing the issue.