Replace turbopack://[project]/... sourcemap uris with file://... in development

[wbinnssmith]

This makes working with devtools more straightforward, reduces our own overhead when tracing stack frames in the error overlay, etc.

Generated code from Turbopack or Next.js still use turbopack://[turbopack] or turbopack://[next] respectively.

Test Plan:

• Update tests
• CI
• https://github.com/vercel/next.js/blob/475bdb1f743bf0b3552b40f85b615d87f4ae4904/test/development/app-dir/source-mapping/README.md

Closes PACK-3430

[ijjk]

Tests Passed

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General

	vercel/next.js canary	vercel/next.js wbinnssmith/sourcemap-uri	Change
buildDuration	18.2s	19.4s	⚠️ +1.2s
buildDurationCached	15.7s	13.7s	N/A
nodeModulesSize	374 MB	373 MB	N/A
nextStartRea..uration (ms)	417ms	418ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js wbinnssmith/sourcemap-uri	Change
214a959c-HASH.js gzip	52.6 kB	52.6 kB	N/A
3528-HASH.js gzip	45.1 kB	44.6 kB	N/A
6581.HASH.js gzip	169 B	169 B	✓
9113-HASH.js gzip	5.27 kB	5.27 kB	N/A
framework-HASH.js gzip	57.4 kB	57.4 kB	N/A
main-app-HASH.js gzip	230 B	232 B	N/A
main-HASH.js gzip	33 kB	32.8 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	✓
Overall change	1.88 kB	1.88 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js wbinnssmith/sourcemap-uri	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	39.4 kB	39.4 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js wbinnssmith/sourcemap-uri	Change
_app-HASH.js gzip	192 B	193 B	N/A
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	510 B	509 B	N/A
css-HASH.js gzip	341 B	344 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	N/A
edge-ssr-HASH.js gzip	266 B	266 B	✓
head-HASH.js gzip	362 B	364 B	N/A
hooks-HASH.js gzip	390 B	391 B	N/A
image-HASH.js gzip	4.41 kB	4.41 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.78 kB	2.78 kB	N/A
routerDirect..HASH.js gzip	328 B	329 B	N/A
script-HASH.js gzip	397 B	397 B	✓
withRouter-HASH.js gzip	324 B	325 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	1.23 kB	1.23 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js wbinnssmith/sourcemap-uri	Change
_buildManifest.js gzip	750 B	749 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js wbinnssmith/sourcemap-uri	Change
index.html gzip	523 B	525 B	N/A
link.html gzip	538 B	539 B	N/A
withRouter.html gzip	518 B	520 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js wbinnssmith/sourcemap-uri	Change
edge-ssr.js gzip	128 kB	128 kB	N/A
page.js gzip	187 kB	187 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js wbinnssmith/sourcemap-uri	Change
middleware-b..fest.js gzip	668 B	670 B	N/A
middleware-r..fest.js gzip	156 B	155 B	N/A
middleware.js gzip	31 kB	31 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js wbinnssmith/sourcemap-uri	Change
973-experime...dev.js gzip	322 B	322 B	✓
973.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	317 kB	317 kB	N/A
app-page-exp..prod.js gzip	121 kB	121 kB	N/A
app-page-tur..prod.js gzip	134 kB	134 kB	N/A
app-page-tur..prod.js gzip	129 kB	129 kB	N/A
app-page.run...dev.js gzip	308 kB	307 kB	N/A
app-page.run..prod.js gzip	117 kB	117 kB	N/A
app-route-ex...dev.js gzip	35.9 kB	35.9 kB	N/A
app-route-ex..prod.js gzip	24.4 kB	24.4 kB	N/A
app-route-tu..prod.js gzip	24.4 kB	24.4 kB	N/A
app-route-tu..prod.js gzip	24.2 kB	24.2 kB	N/A
app-route.ru...dev.js gzip	37.6 kB	37.5 kB	N/A
app-route.ru..prod.js gzip	24.2 kB	24.2 kB	N/A
pages-api-tu..prod.js gzip	9.61 kB	9.61 kB	✓
pages-api.ru...dev.js gzip	11.4 kB	11.4 kB	✓
pages-api.ru..prod.js gzip	9.61 kB	9.61 kB	✓
pages-turbo...prod.js gzip	20.9 kB	20.9 kB	✓
pages.runtim...dev.js gzip	26.5 kB	26.5 kB	✓
pages.runtim..prod.js gzip	20.9 kB	20.9 kB	✓
server.runti..prod.js gzip	58.4 kB	58.4 kB	N/A
Overall change	99.7 kB	99.7 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js wbinnssmith/sourcemap-uri	Change
0.pack gzip	1.85 MB	1.86 MB	⚠️ +13.1 kB
index.pack gzip	143 kB	144 kB	⚠️ +694 B
Overall change	1.99 MB	2 MB	⚠️ +13.8 kB

Diff details

Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [8358],
   {
-    /***/ 7905: /***/ (
+    /***/ 3194: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(2287);
+          return __webpack_require__(1499);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 4266: /***/ (module, exports, __webpack_require__) => {
+    /***/ 3557: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,17 +40,17 @@
         __webpack_require__(7921)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6686)
+        __webpack_require__(1685)
       );
-      const _getimgprops = __webpack_require__(6152);
-      const _imageconfig = __webpack_require__(7525);
-      const _imageconfigcontextsharedruntime = __webpack_require__(6909);
-      const _warnonce = __webpack_require__(694);
-      const _routercontextsharedruntime = __webpack_require__(1769);
+      const _getimgprops = __webpack_require__(2321);
+      const _imageconfig = __webpack_require__(8633);
+      const _imageconfigcontextsharedruntime = __webpack_require__(9251);
+      const _warnonce = __webpack_require__(2495);
+      const _routercontextsharedruntime = __webpack_require__(5906);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5427)
+        __webpack_require__(9630)
       );
-      const _usemergedref = __webpack_require__(7892);
+      const _usemergedref = __webpack_require__(7662);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -371,7 +371,7 @@
       /***/
     },
 
-    /***/ 7892: /***/ (module, exports, __webpack_require__) => {
+    /***/ 7662: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -432,7 +432,7 @@
       /***/
     },
 
-    /***/ 6152: /***/ (
+    /***/ 2321: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -448,9 +448,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(694);
-      const _imageblursvg = __webpack_require__(411);
-      const _imageconfig = __webpack_require__(7525);
+      const _warnonce = __webpack_require__(2495);
+      const _imageblursvg = __webpack_require__(1103);
+      const _imageconfig = __webpack_require__(8633);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -824,7 +824,7 @@
       /***/
     },
 
-    /***/ 411: /***/ (__unused_webpack_module, exports) => {
+    /***/ 1103: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -879,7 +879,7 @@
       /***/
     },
 
-    /***/ 2063: /***/ (
+    /***/ 4297: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -906,10 +906,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(9608);
-      const _getimgprops = __webpack_require__(6152);
-      const _imagecomponent = __webpack_require__(4266);
+      const _getimgprops = __webpack_require__(2321);
+      const _imagecomponent = __webpack_require__(3557);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5427)
+        __webpack_require__(9630)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -941,7 +941,7 @@
       /***/
     },
 
-    /***/ 5427: /***/ (__unused_webpack_module, exports) => {
+    /***/ 9630: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -976,7 +976,7 @@
       /***/
     },
 
-    /***/ 2287: /***/ (
+    /***/ 1499: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -993,8 +993,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(2433);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-69d4b800-20241021_re_5ehui3izxi57mbto7db67nrlae/node_modules/next/image.js
-      var next_image = __webpack_require__(3447);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-69d4b800-20241021_re_lvlskvysvdaybwqbl4n7iaejzm/node_modules/next/image.js
+      var next_image = __webpack_require__(4593);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -1024,12 +1024,12 @@
       /***/
     },
 
-    /***/ 3447: /***/ (
+    /***/ 4593: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(2063);
+      module.exports = __webpack_require__(4297);
 
       /***/
     },
@@ -1039,7 +1039,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(7905)
+      __webpack_exec__(3194)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 3528-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

failed to diff

Diff for app-page.runtime.prod.js

Diff too large to display

Diff for app-route-ex..ntime.dev.js

Diff too large to display

Diff for app-route-ex..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route.runtime.dev.js

Diff too large to display

Diff for app-route.ru..time.prod.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: c5b8757

[unstubbable]

Hi Will, can you add https://github.com/vercel/next.js/blob/canary/test/development/app-dir/source-mapping/README.md to the test plan? There's no automatic tests for the React DevTools integration, so for now we need to check that manually whenever we're changing something about the source maps.

[wbinnssmith]

cc @sebmarkbage

[wbinnssmith]

Hi Will, can you add https://github.com/vercel/next.js/blob/canary/test/development/app-dir/source-mapping/README.md to the test plan? There's no automatic tests for the React DevTools integration, so for now we need to check that manually whenever we're changing something about the source maps.

Confirmed that this passes as of 9e22f6f and the server component source file is shown in the stack frame.

[wbinnssmith]

• ignoreList source map support for generated code #71770
• Replace turbopack://[project]/... sourcemap uris with file://... in development #71489 👈
• canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @wbinnssmith and the rest of your teammates on Graphite