Enable loading source maps for Next Server and React #64527

unstubbable · 2024-04-15T21:12:12Z

What?

This fixes the source maps creation for the Next Server.

Why?

Allows for better debugging of the Next Server internals, as well as the React server code, especially in production mode (i.e. NODE_OPTIONS='--inspect --enable-source-maps' next start).

In Chrome:

In vscode:

How?

Copy React source maps into src/compiled.
Load React source maps via source-map-loader during webpack build.
Inline Next.js sources contents into source map files to avoid loadNetworkResource error in Chrome DevTools.
Adjust vscode launch configurations.

Additional Notes

Hopefully this does not interfere with your current work on React prod builds / source maps, @acdlite?
Unfortunately, the source maps are not applied in the DevTools Performance panel. I'm not sure yet, whether this is something we can fix, or whether it's a DevTools limitation when profiling a Node.js app. It does work when profiling client-side code.
I've checked that https://github.com/vercel/next.js/blob/canary/contributing/core/vscode-debugger.md is still valid.

socket-security · 2024-04-15T21:13:01Z

New dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/source-map-loader@5.0.0	None	`+3`	575 kB	evilebottnawi

View full report↗︎

ijjk · 2024-04-15T21:37:46Z

Allow CI Workflow Run

approve CI run for commit: c481043

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

unstubbable · 2024-04-18T06:58:32Z

@eps1lon Maybe this is a noob question, but could it be that a new comment must be created, instead of the old one being updated, after I've now pushed new commits?

ijjk · 2024-04-18T08:05:49Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	unstubbable/next.js server-source-maps	Change
buildDuration	14s	14.2s	⚠️ +218ms
buildDurationCached	7.6s	6.5s	N/A
nodeModulesSize	199 MB	238 MB	⚠️ +38.3 MB
nextStartRea..uration (ms)	403ms	408ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	unstubbable/next.js server-source-maps	Change
2453-HASH.js gzip	31.5 kB	31.5 kB	N/A
3304.HASH.js gzip	169 B	169 B	✓
3f784ff6-HASH.js gzip	53.7 kB	53.7 kB	N/A
8299-HASH.js gzip	5.1 kB	5.1 kB	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	229 B	226 B	N/A
main-HASH.js gzip	29.6 kB	29.7 kB	N/A
webpack-HASH.js gzip	1.64 kB	1.65 kB	N/A
Overall change	45.4 kB	45.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	unstubbable/next.js server-source-maps	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	unstubbable/next.js server-source-maps	Change
_app-HASH.js gzip	193 B	194 B	N/A
_error-HASH.js gzip	193 B	191 B	N/A
amp-HASH.js gzip	511 B	511 B	✓
css-HASH.js gzip	342 B	343 B	N/A
dynamic-HASH.js gzip	2.51 kB	2.51 kB	N/A
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	365 B	364 B	N/A
hooks-HASH.js gzip	389 B	391 B	N/A
image-HASH.js gzip	4.28 kB	4.28 kB	N/A
index-HASH.js gzip	269 B	268 B	N/A
link-HASH.js gzip	2.68 kB	2.69 kB	N/A
routerDirect..HASH.js gzip	328 B	326 B	N/A
script-HASH.js gzip	395 B	397 B	N/A
withRouter-HASH.js gzip	323 B	323 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	1.21 kB	1.21 kB	✓

Client Build Manifests

	vercel/next.js canary	unstubbable/next.js server-source-maps	Change
_buildManifest.js gzip	483 B	485 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	unstubbable/next.js server-source-maps	Change
index.html gzip	528 B	528 B	✓
link.html gzip	541 B	542 B	N/A
withRouter.html gzip	524 B	524 B	✓
Overall change	1.05 kB	1.05 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	unstubbable/next.js server-source-maps	Change
edge-ssr.js gzip	94.5 kB	94.5 kB	N/A
page.js gzip	3.05 kB	3.04 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	unstubbable/next.js server-source-maps	Change
middleware-b..fest.js gzip	622 B	626 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	25.6 kB	25.6 kB	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	839 B	839 B	✓

Next Runtimes

	vercel/next.js canary	unstubbable/next.js server-source-maps	Change
app-page-exp...dev.js gzip	171 kB	171 kB	✓
app-page-exp..prod.js gzip	97.6 kB	97.6 kB	✓
app-page-tur..prod.js gzip	99.4 kB	99.4 kB	✓
app-page-tur..prod.js gzip	93.6 kB	93.6 kB	✓
app-page.run...dev.js gzip	145 kB	145 kB	✓
app-page.run..prod.js gzip	92.1 kB	92.1 kB	✓
app-route-ex...dev.js gzip	21.5 kB	21.5 kB	✓
app-route-ex..prod.js gzip	15.1 kB	15.1 kB	✓
app-route-tu..prod.js gzip	15.1 kB	15.1 kB	✓
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	✓
app-route.ru...dev.js gzip	21.2 kB	21.2 kB	✓
app-route.ru..prod.js gzip	14.9 kB	14.9 kB	✓
pages-api-tu..prod.js gzip	9.55 kB	9.55 kB	✓
pages-api.ru...dev.js gzip	9.82 kB	9.82 kB	✓
pages-api.ru..prod.js gzip	9.55 kB	9.55 kB	✓
pages-turbo...prod.js gzip	21.4 kB	21.4 kB	✓
pages.runtim...dev.js gzip	22.1 kB	22.1 kB	✓
pages.runtim..prod.js gzip	21.4 kB	21.4 kB	✓
server.runti..prod.js gzip	51.6 kB	51.6 kB	N/A
Overall change	895 kB	895 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	unstubbable/next.js server-source-maps	Change
0.pack gzip	1.6 MB	1.6 MB	N/A
index.pack gzip	107 kB	107 kB	⚠️ +215 B
Overall change	107 kB	107 kB	⚠️ +215 B

Diff details

Diff for middleware.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],
   {
-    /***/ 1552: /***/ (
+    /***/ 4070: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(5237);
+          return __webpack_require__(396);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 2016: /***/ (module, exports, __webpack_require__) => {
+    /***/ 8490: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,15 +40,15 @@
         __webpack_require__(422)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6074)
+        __webpack_require__(2457)
       );
-      const _getimgprops = __webpack_require__(9571);
-      const _imageconfig = __webpack_require__(6567);
-      const _imageconfigcontextsharedruntime = __webpack_require__(419);
-      const _warnonce = __webpack_require__(4486);
-      const _routercontextsharedruntime = __webpack_require__(162);
+      const _getimgprops = __webpack_require__(7932);
+      const _imageconfig = __webpack_require__(5706);
+      const _imageconfigcontextsharedruntime = __webpack_require__(9483);
+      const _warnonce = __webpack_require__(9035);
+      const _routercontextsharedruntime = __webpack_require__(4829);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6996)
+        __webpack_require__(7240)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -379,7 +379,7 @@
       /***/
     },
 
-    /***/ 9571: /***/ (
+    /***/ 7932: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -395,9 +395,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(4486);
-      const _imageblursvg = __webpack_require__(133);
-      const _imageconfig = __webpack_require__(6567);
+      const _warnonce = __webpack_require__(9035);
+      const _imageblursvg = __webpack_require__(2642);
+      const _imageconfig = __webpack_require__(5706);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -772,7 +772,7 @@
       /***/
     },
 
-    /***/ 133: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2642: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -827,7 +827,7 @@
       /***/
     },
 
-    /***/ 4085: /***/ (
+    /***/ 503: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -854,10 +854,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(2430);
-      const _getimgprops = __webpack_require__(9571);
-      const _imagecomponent = __webpack_require__(2016);
+      const _getimgprops = __webpack_require__(7932);
+      const _imagecomponent = __webpack_require__(8490);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6996)
+        __webpack_require__(7240)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -889,7 +889,7 @@
       /***/
     },
 
-    /***/ 6996: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7240: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -924,7 +924,7 @@
       /***/
     },
 
-    /***/ 5237: /***/ (
+    /***/ 396: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -941,8 +941,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(1527);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@18.2.0_react@18.2.0/node_modules/next/image.js
-      var next_image = __webpack_require__(1577);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@18.2.0_react@18.2.0/node_modules/next/image.js
+      var next_image = __webpack_require__(73);
       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",
@@ -972,12 +972,8 @@
       /***/
     },
 
-    /***/ 1577: /***/ (
-      module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      module.exports = __webpack_require__(4085);
+    /***/ 73: /***/ (module, __unused_webpack_exports, __webpack_require__) => {
+      module.exports = __webpack_require__(503);
 
       /***/
     },
@@ -987,7 +983,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(1552)
+      __webpack_exec__(4070)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 2453-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: ea37c04

timneutkens · 2024-04-18T08:06:45Z

Added the CI Approved label to automatically approve further pushes for you 🙂

unstubbable · 2024-04-18T12:19:33Z

Added the CI Approved label to automatically approve further pushes for you 🙂

@timneutkens Looks like that only worked once.

eps1lon · 2024-04-18T13:13:53Z

The label is for our internal check but then there's also additional checks from GitHub on top of that.

ijjk · 2024-04-18T13:24:22Z

Tests Passed

eps1lon · 2024-04-18T14:19:53Z

So is this for client and server or just server?

unstubbable · 2024-04-18T17:52:06Z

So is this for client and server or just server?

@eps1lon The React source map loading is only for the server. But due to the SWC config inlineSourcesContent being applied to both server and client files, we can now also set breakpoints in the Next.js source files on the client:

Before, there was this error instead:

Could not load content for webpack://_N_E/src/pages/_app.tsx (Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME)

eps1lon · 2024-04-18T20:51:57Z

Could not load content for webpack://_N_E/src/pages/_app.tsx (Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME)

I actually just hit this error so this would be welcome for me. I'll check it out locally and then ask around if this is ok to land. Looks good to me though.

This avoids a `loadNetworkResource` error in Chrome DevTools when trying to set breakpoints in the Next.js sources, for both server and client.

This can be reverted when a React canary version is used that includes facebook/react#28881.

unstubbable · 2024-04-20T19:28:16Z

@eps1lon Did you get any feedback on this?

I've now also split up the inlineSourcesContent change from the React source maps loading change into separate commits, so that we can revert the latter independently, when we upgrade to a React canary version that includes facebook/react#28881.

eps1lon

Good to go, thank you!

unstubbable requested review from a team, timneutkens, ijjk, shuding, huozhi, feedthejim, ztanner and wyattjoh as code owners April 15, 2024 21:12

ijjk added the type: next label Apr 15, 2024

unstubbable force-pushed the server-source-maps branch from 7d6744d to 3936568 Compare April 15, 2024 21:13

unstubbable force-pushed the server-source-maps branch 2 times, most recently from 1066cf7 to c481043 Compare April 17, 2024 20:04

timneutkens added the CI approved Approve running CI for fork label Apr 18, 2024

unstubbable force-pushed the server-source-maps branch from c481043 to bc3de2b Compare April 18, 2024 11:07

unstubbable added 3 commits April 20, 2024 21:18

Inline Next.js sources content into source map files

c8f3798

This avoids a `loadNetworkResource` error in Chrome DevTools when trying to set breakpoints in the Next.js sources, for both server and client.

Add and load React production source maps

47fe8e8

This can be reverted when a React canary version is used that includes facebook/react#28881.

Fix vscode launch configs to allow setting breakpoints in the IDE

ea37c04

unstubbable force-pushed the server-source-maps branch from bc3de2b to ea37c04 Compare April 20, 2024 19:24

eps1lon approved these changes Apr 22, 2024

View reviewed changes

eps1lon enabled auto-merge (squash) April 22, 2024 12:33

eps1lon merged commit f936932 into vercel:canary Apr 22, 2024
75 checks passed

unstubbable deleted the server-source-maps branch April 22, 2024 12:54

github-actions bot added the locked label May 7, 2024

github-actions bot locked as resolved and limited conversation to collaborators May 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enable loading source maps for Next Server and React #64527

Enable loading source maps for Next Server and React #64527

unstubbable commented Apr 15, 2024 •

edited

Loading

socket-security bot commented Apr 15, 2024 •

edited

Loading

ijjk commented Apr 15, 2024 •

edited by eps1lon

Loading

unstubbable commented Apr 18, 2024

ijjk commented Apr 18, 2024 •

edited

Loading

timneutkens commented Apr 18, 2024

unstubbable commented Apr 18, 2024

eps1lon commented Apr 18, 2024

ijjk commented Apr 18, 2024 •

edited

Loading

eps1lon commented Apr 18, 2024

unstubbable commented Apr 18, 2024

eps1lon commented Apr 18, 2024

unstubbable commented Apr 20, 2024

eps1lon left a comment

Enable loading source maps for Next Server and React #64527

Enable loading source maps for Next Server and React #64527

Conversation

unstubbable commented Apr 15, 2024 • edited Loading

What?

Why?

How?

Additional Notes

socket-security bot commented Apr 15, 2024 • edited Loading

ijjk commented Apr 15, 2024 • edited by eps1lon Loading

unstubbable commented Apr 18, 2024

ijjk commented Apr 18, 2024 • edited Loading

Stats from current PR

timneutkens commented Apr 18, 2024

unstubbable commented Apr 18, 2024

eps1lon commented Apr 18, 2024

ijjk commented Apr 18, 2024 • edited Loading

Tests Passed

eps1lon commented Apr 18, 2024

unstubbable commented Apr 18, 2024

eps1lon commented Apr 18, 2024

unstubbable commented Apr 20, 2024

eps1lon left a comment

Choose a reason for hiding this comment

unstubbable commented Apr 15, 2024 •

edited

Loading

socket-security bot commented Apr 15, 2024 •

edited

Loading

ijjk commented Apr 15, 2024 •

edited by eps1lon

Loading

ijjk commented Apr 18, 2024 •

edited

Loading

ijjk commented Apr 18, 2024 •

edited

Loading