source maps

packages/gatsby/cache-dir/fast-refresh-overlay/components/runtime-errors.js

@@ -9,12 +9,14 @@ import { Accordion, AccordionItem } from "./accordion"
 function WrappedAccordionItem({ error, open }) {
   const stacktrace = StackTrace.parse(error)
   const codeFrameInformation = getCodeFrameInformation(stacktrace)
-  const filePath = codeFrameInformation?.moduleId
+
+  const modulePath = codeFrameInformation?.moduleId
   const lineNumber = codeFrameInformation?.lineNumber
   const columnNumber = codeFrameInformation?.columnNumber
   const name = codeFrameInformation?.functionName
+  const filePath = modulePath.replace(/\?export=(default|head)$/, ``)
 
-  const res = useStackFrame({ moduleId: filePath, lineNumber, columnNumber })
+  const res = useStackFrame({ moduleId: modulePath, lineNumber, columnNumber })
   const line = res.sourcePosition?.line
 
   const Title = () => {

packages/gatsby/src/utils/webpack/loaders/webpack-remove-exports-loader.ts

@@ -1,42 +1,61 @@
-import { LoaderContext } from "webpack"
-import { transformSync } from "@babel/core"
+/* eslint-disable @babel/no-invalid-this */
+
+import { LoaderDefinitionFunction } from "webpack"
+import { transform } from "@babel/core"
 
 interface IOptions {
   jsx?: boolean
   remove?: Array<string>
 }
 
-module.exports = function loader(
-  this: LoaderContext<IOptions>,
-  source: string
-): string | null | undefined {
-  const options = this.getOptions()
+const webpackRemoveExportsLoader: LoaderDefinitionFunction<IOptions> =
+  function webpackRemoveExportsLoader(source, sourceMap): void {
+    const callback = this.async()
+    const options = this.getOptions()
 
-  const result = transformSync(source, {
-    babelrc: false,
-    configFile: false,
-    presets: options?.jsx
-      ? [
+    transform(
+      source,
+      {
+        babelrc: false,
+        configFile: false,
+        // @ts-ignore inputSourceMap expect object or falsy, but webpack types suggest sourceMap can be a string,
+        // which is not compatibile with babel's transform options
+        inputSourceMap: sourceMap,
+        sourceFileName: this.resourcePath,
+        sourceMaps: this.sourceMap,
+        filename: this.resourcePath,
+        presets: options?.jsx
+          ? [
+              [
+                require.resolve(`babel-preset-gatsby/babel-preset-react`),
+                {
+                  useBuiltIns: true,
+                  pragma: `React.createElement`,
+                  // jsx is used only in develop, so for now this is fine
+                  development: true,
+                },
+              ],
+            ]
+          : undefined,
+        plugins: [
           [
-            require.resolve(`babel-preset-gatsby/babel-preset-react`),
+            require.resolve(`../../babel/babel-plugin-remove-api`),
             {
-              useBuiltIns: true,
-              pragma: `React.createElement`,
-              // jsx is used only in develop, so for now this is fine
-              development: true,
+              apis: options?.remove ?? [],
             },
           ],
-        ]
-      : undefined,
-    plugins: [
-      [
-        require.resolve(`../../babel/babel-plugin-remove-api`),
-        {
-          apis: options?.remove ?? [],
-        },
-      ],
-    ],
-  })
+        ],
+      },
+      (err, result) => {
+        if (err) {
+          callback(err)
+        } else if (result && result.code && result.map) {
+          callback(null, result?.code, result?.map)
+        } else {
+          callback(null, source, sourceMap)
+        }
+      }
+    )
+  }
 
-  return result?.code
-}
+module.exports = webpackRemoveExportsLoader