Builder-Vite: Fix missing source map warning

storybookjs · Aug 27, 2024 · 1e20df1 · 1e20df1
1 parent 1ebcb33
commit 1e20df1
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 12 deletions.
diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
@@ -45,7 +45,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
 
     return `
     if (import.meta.hot) {
-      import.meta.hot.accept('${virtualStoriesFile}', (newModule) => {
+      import.meta.hot.accept('\0${virtualStoriesFile}', (newModule) => {
       // importFn has changed so we need to patch the new one in
       window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
       });

diff --git a/code/builders/builder-vite/src/plugins/code-generator-plugin.ts b/code/builders/builder-vite/src/plugins/code-generator-plugin.ts
@@ -28,11 +28,11 @@ 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(`\0${virtualFileId}`);
         if (appModule) {
           server.moduleGraph.invalidateModule(appModule);
         }
-        const storiesModule = server.moduleGraph.getModuleById(virtualStoriesFile);
+        const storiesModule = server.moduleGraph.getModuleById(`\0${virtualStoriesFile}`);
         if (storiesModule) {
           server.moduleGraph.invalidateModule(storiesModule);
         }
@@ -70,33 +70,34 @@ export function codeGeneratorPlugin(options: Options): Plugin {
     },
     resolveId(source) {
       if (source === virtualFileId) {
-        return `${virtualFileId}`;
+        return `\0${virtualFileId}`;
       }
       if (source === iframePath) {
         return iframeId;
       }
       if (source === virtualStoriesFile) {
-        return `${virtualStoriesFile}`;
+        return `\0${virtualStoriesFile}`;
       }
       if (source === virtualPreviewFile) {
-        return virtualPreviewFile;
+        return `\0${virtualPreviewFile}`;
       }
       if (source === virtualAddonSetupFile) {
-        return `${virtualAddonSetupFile}`;
+        return `\0${virtualAddonSetupFile}`;
       }
 
       return undefined;
     },
     async load(id, config) {
-      if (id === `${virtualStoriesFile}`) {
+      if (id === `\0${virtualStoriesFile}`) {
         return generateImportFnScriptCode(options);
       }
 
-      if (id === `${virtualAddonSetupFile}`) {
+      if (id === `\0${virtualAddonSetupFile}`) {
         return generateAddonSetupCode();
       }
 
-      if (id === `${virtualFileId}`) {
+      if (id === `\0${virtualFileId}`) {
+        console.log('loaded', id);
         return generateModernIframeScriptCode(options, projectRoot);
       }
 

diff --git a/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts b/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts
@@ -50,7 +50,7 @@ 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('\0/virtual:')) {
       return filename;
     }
     // Otherwise, we need them in the format `./path/to/file.js`.

diff --git a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts b/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);