From 5c1828bdd6794b4de150997f5c3b4a1809be77cc Mon Sep 17 00:00:00 2001
From: Hendrik Liebau <mail@hendrik-liebau.de>
Date: Sat, 12 Oct 2024 02:45:42 +0200
Subject: [PATCH] Handle source map requests for Turbopack client chunks
 (#71168)

Since Turbopack is generating actual source map files, and not inlined
source maps as Webpack does, React might request a source map for a
client chunk using the chunk's URL pathname, e.g.
`/_next/static/chunks/[project]__edc466._.js`.

In the source map dev middleware, we need to convert those URL pathnames
to filenames before requesting the source map for the file from
Turbopack.

## Test Plan

- start `pnpm next dev --turbo test/development/app-dir/source-mapping`
- go to `http://localhost:3000/client`
- open React DevTools
---
 .../react-dev-overlay/server/middleware-turbopack.ts      | 8 ++++++--
 packages/next/src/server/dev/hot-reloader-turbopack.ts    | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/next/src/client/components/react-dev-overlay/server/middleware-turbopack.ts b/packages/next/src/client/components/react-dev-overlay/server/middleware-turbopack.ts
index b71aeaba2a493..25eac472abdcf 100644
--- a/packages/next/src/client/components/react-dev-overlay/server/middleware-turbopack.ts
+++ b/packages/next/src/client/components/react-dev-overlay/server/middleware-turbopack.ts
@@ -151,7 +151,7 @@ export function getOverlayMiddleware(project: Project) {
   }
 }
 
-export function getSourceMapMiddleware(project: Project) {
+export function getSourceMapMiddleware(project: Project, distDir: string) {
   return async function (
     req: IncomingMessage,
     res: ServerResponse,
@@ -163,13 +163,17 @@ export function getSourceMapMiddleware(project: Project) {
       return next()
     }
 
-    const filename = searchParams.get('filename')
+    let filename = searchParams.get('filename')
 
     if (!filename) {
       return badRequest(res)
     }
 
     try {
+      if (filename.startsWith('/_next/static')) {
+        filename = path.join(distDir, filename.replace(/^\/_next\//, ''))
+      }
+
       const sourceMapString = await project.getSourceMap(filename)
 
       if (sourceMapString) {
diff --git a/packages/next/src/server/dev/hot-reloader-turbopack.ts b/packages/next/src/server/dev/hot-reloader-turbopack.ts
index 5eb5f61c0aef0..a0b0f1c33fabf 100644
--- a/packages/next/src/server/dev/hot-reloader-turbopack.ts
+++ b/packages/next/src/server/dev/hot-reloader-turbopack.ts
@@ -568,7 +568,7 @@ export async function createHotReloaderTurbopack(
 
   const middlewares = [
     getOverlayMiddleware(project),
-    getSourceMapMiddleware(project),
+    getSourceMapMiddleware(project, distDir),
   ]
 
   const versionInfoPromise = getVersionInfo(