Merge pull request #32111 from storybookjs/valentin/fix-missing-source-map-for-webpack-mock-loaders

Test: Fix missing source map for Webpack mock loaders

Author: valentinpalkovic

code/core/src/core-server/presets/vitePlugins/vite-mock/plugin.ts

@@ -101,17 +101,27 @@ export function viteMockPlugin(options: MockPluginOptions): Plugin[] {
         server.watcher.on('unlink', invalidateAffectedFiles);
       },
 
-      async load(id) {
-        for (const call of mockCalls) {
-          if (call.absolutePath !== id) {
-            continue;
-          }
+      load: {
+        order: 'pre',
+        handler(id) {
+          const preserveSymlinks = viteConfig.resolve.preserveSymlinks;
+
+          const idNorm = normalizePathForComparison(id, preserveSymlinks);
+          const cleanId = getCleanId(idNorm);
+
+          for (const call of mockCalls) {
+            const callNorm = normalizePathForComparison(call.absolutePath, preserveSymlinks);
+
+            if (callNorm !== idNorm && call.path !== cleanId) {
+              continue;
+            }
 
-          if (call.redirectPath) {
-            return readFileSync(call.redirectPath, 'utf-8');
+            if (call.redirectPath) {
+              return readFileSync(call.redirectPath, 'utf-8');
+            }
           }
-        }
-        return null;
+          return null;
+        },
       },
       transform: {
         order: 'pre',
@@ -140,8 +150,6 @@ export function viteMockPlugin(options: MockPluginOptions): Plugin[] {
                   code: automockedCode.toString(),
                   map: automockedCode.generateMap(),
                 };
-              } else {
-                return readFileSync(call.redirectPath, 'utf-8');
               }
             } catch (e) {
               logger.error(`Error automocking ${id}: ${e}`);

code/core/src/core-server/presets/webpack/loaders/storybook-mock-transform-loader.ts

@@ -10,5 +10,6 @@ import { rewriteSbMockImportCalls } from '../../../mocking-utils/extract';
  */
 export default function storybookMockTransformLoader(this: LoaderContext<{}>, source: string) {
   const result = rewriteSbMockImportCalls(source);
-  return result.code;
+  const callback = this.async();
+  callback(null, result.code, result.map || undefined);
 }

code/core/src/core-server/presets/webpack/loaders/webpack-automock-loader.ts

@@ -1,5 +1,3 @@
-import { parse } from '@babel/parser';
-import type { ParserOptions } from '@babel/parser';
 import type { LoaderContext } from 'webpack';
 
 import { getAutomockCode } from '../../../mocking-utils/automock';
@@ -28,14 +26,15 @@ interface AutomockLoaderOptions {
 export default function webpackAutomockLoader(
   this: LoaderContext<AutomockLoaderOptions>,
   source: string
-): string {
+) {
   // Retrieve the options passed in the resource query string (e.g., `?spy=true`).
   const options = this.getOptions();
+  const callback = this.async();
   const isSpy = options.spy === 'true';
 
   // Generate the mocked source code using the utility from @vitest/mocker.
   const mocked = getAutomockCode(source, isSpy, babelParser as any);
 
   // Return the transformed code to Webpack for further processing.
-  return mocked.toString();
+  callback(null, mocked.toString(), mocked.generateMap());
 }