Builder-Vite: Fix missing source map warning

Author: valentinpalkovic

code/builders/builder-vite/src/codegen-modern-iframe-script.ts

@@ -2,6 +2,7 @@ import { getFrameworkName, loadPreviewOrConfigFile } from 'storybook/internal/co
 import type { Options, PreviewAnnotation } from 'storybook/internal/types';
 
 import { processPreviewAnnotation } from './utils/process-preview-annotation';
+import { getResolvedVirtualModuleId } from './utils/virtual-module';
 import { virtualAddonSetupFile, virtualStoriesFile } from './virtual-file-names';
 
 export async function generateModernIframeScriptCode(options: Options, projectRoot: string) {
@@ -45,7 +46,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
 
     return `
     if (import.meta.hot) {
-      import.meta.hot.accept('${virtualStoriesFile}', (newModule) => {
+      import.meta.hot.accept('${getResolvedVirtualModuleId(virtualStoriesFile)}', (newModule) => {
       // importFn has changed so we need to patch the new one in
       window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
       });

code/builders/builder-vite/src/plugins/code-generator-plugin.ts

@@ -8,6 +8,7 @@ import { generateImportFnScriptCode } from '../codegen-importfn-script';
 import { generateModernIframeScriptCode } from '../codegen-modern-iframe-script';
 import { generateAddonSetupCode } from '../codegen-set-addon-channel';
 import { transformIframeHtml } from '../transform-iframe-html';
+import { getResolvedVirtualModuleId } from '../utils/virtual-module';
 import {
   virtualAddonSetupFile,
   virtualFileId,
@@ -28,11 +29,15 @@ export function codeGeneratorPlugin(options: Options): Plugin {
       // invalidate the whole vite-app.js script on every file change.
       // (this might be a little too aggressive?)
       server.watcher.on('change', () => {
-        const appModule = server.moduleGraph.getModuleById(virtualFileId);
+        const appModule = server.moduleGraph.getModuleById(
+          getResolvedVirtualModuleId(virtualFileId)
+        );
         if (appModule) {
           server.moduleGraph.invalidateModule(appModule);
         }
-        const storiesModule = server.moduleGraph.getModuleById(virtualStoriesFile);
+        const storiesModule = server.moduleGraph.getModuleById(
+          getResolvedVirtualModuleId(virtualStoriesFile)
+        );
         if (storiesModule) {
           server.moduleGraph.invalidateModule(storiesModule);
         }
@@ -70,33 +75,33 @@ export function codeGeneratorPlugin(options: Options): Plugin {
     },
     resolveId(source) {
       if (source === virtualFileId) {
-        return `${virtualFileId}`;
+        return getResolvedVirtualModuleId(virtualFileId);
       }
       if (source === iframePath) {
         return iframeId;
       }
       if (source === virtualStoriesFile) {
-        return `${virtualStoriesFile}`;
+        return getResolvedVirtualModuleId(virtualStoriesFile);
       }
       if (source === virtualPreviewFile) {
-        return virtualPreviewFile;
+        return getResolvedVirtualModuleId(virtualPreviewFile);
       }
       if (source === virtualAddonSetupFile) {
-        return `${virtualAddonSetupFile}`;
+        return getResolvedVirtualModuleId(virtualAddonSetupFile);
       }
 
       return undefined;
     },
     async load(id, config) {
-      if (id === `${virtualStoriesFile}`) {
+      if (id === getResolvedVirtualModuleId(virtualStoriesFile)) {
         return generateImportFnScriptCode(options);
       }
 
-      if (id === `${virtualAddonSetupFile}`) {
+      if (id === getResolvedVirtualModuleId(virtualAddonSetupFile)) {
         return generateAddonSetupCode();
       }
 
-      if (id === `${virtualFileId}`) {
+      if (id === getResolvedVirtualModuleId(virtualFileId)) {
         return generateModernIframeScriptCode(options, projectRoot);
       }
 

code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts

@@ -6,6 +6,8 @@ import type { BuilderStats } from 'storybook/internal/types';
 import slash from 'slash';
 import type { Plugin } from 'vite';
 
+import { getResolvedVirtualModuleId } from '../utils/virtual-module';
+
 /*
  * Reason, Module are copied from chromatic types
  * https://github.com/chromaui/chromatic-cli/blob/145a5e295dde21042e96396c7e004f250d842182/bin-src/types.ts#L265-L276
@@ -50,7 +52,10 @@ export function pluginWebpackStats({ workingDir }: WebpackStatsPluginOptions): W
   /** Convert an absolute path name to a path relative to the vite root, with a starting `./` */
   function normalize(filename: string) {
     // Do not try to resolve virtual files
-    if (filename.startsWith('/virtual:')) {
+    if (
+      filename.startsWith('/virtual:') ||
+      filename.startsWith(getResolvedVirtualModuleId('/virtual:'))
+    ) {
       return filename;
     }
     // Otherwise, we need them in the format `./path/to/file.js`.

code/builders/builder-vite/src/utils/virtual-module.ts

@@ -0,0 +1,3 @@
+export function getResolvedVirtualModuleId(virtualModuleId: string) {
+  return `\0${virtualModuleId}`;
+}

code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts

@@ -26,7 +26,7 @@ export async function vueComponentMeta(tsconfigPath = 'tsconfig.json'): Promise<
 
   // exclude stories, virtual modules and storybook internals
   const exclude =
-    /\.stories\.(ts|tsx|js|jsx)$|^\/virtual:|^\/sb-preview\/|\.storybook\/.*\.(ts|js)$/;
+    /\.stories\.(ts|tsx|js|jsx)$|^\0\/virtual:|^\/virtual:|^\/sb-preview\/|\.storybook\/.*\.(ts|js)$/;
   const include = /\.(vue|ts|js|tsx|jsx)$/;
   const filter = createFilter(include, exclude);