Fix extra swc optimizer applied to node_modules in browser layer #62051

huozhi · 2024-02-14T13:25:16Z

What

Disable swc transform optimizer for node_modules in browser layer of app router bundles

Fixes #61858
Fixes #60644
Fixes #60920
Fixes #61740
Closes NEXT-2418

Why

In browser there could be not only one runtime, it could have both js worker and browser. In js worker the typeof window is not as same as in browser, so disabling the swc optimizer which will replace the code. Leave the condition as it as.

ijjk · 2024-02-14T13:31:39Z

Tests Passed

ijjk · 2024-02-14T13:36:52Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix/swc-optimize-node-modules	Change
buildDuration	23.5s	23.2s	N/A
buildDurationCached	9s	8.8s	N/A
nodeModulesSize	196 MB	196 MB	⚠️ +2.79 kB
nextStartRea..uration (ms)	462ms	439ms	N/A

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix/swc-optimize-node-modules	Change
1068-HASH.js gzip	30.1 kB	30.2 kB	⚠️ +146 B
3f784ff6-HASH.js gzip	53.5 kB	53.5 kB	N/A
4944-HASH.js gzip	4.96 kB	5.03 kB	N/A
8423.HASH.js gzip	181 B	181 B	✓
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	241 B	242 B	N/A
main-HASH.js gzip	32.1 kB	32.1 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	✓
Overall change	77.2 kB	77.3 kB	⚠️ +146 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix/swc-optimize-node-modules	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js fix/swc-optimize-node-modules	Change
_app-HASH.js gzip	196 B	196 B	✓
_error-HASH.js gzip	184 B	183 B	N/A
amp-HASH.js gzip	503 B	504 B	N/A
css-HASH.js gzip	323 B	324 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.51 kB	N/A
edge-ssr-HASH.js gzip	258 B	259 B	N/A
head-HASH.js gzip	353 B	351 B	N/A
hooks-HASH.js gzip	370 B	370 B	✓
image-HASH.js gzip	4.21 kB	4.2 kB	N/A
index-HASH.js gzip	259 B	259 B	✓
link-HASH.js gzip	2.68 kB	2.67 kB	N/A
routerDirect..HASH.js gzip	313 B	314 B	N/A
script-HASH.js gzip	386 B	385 B	N/A
withRouter-HASH.js gzip	309 B	311 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	931 B	931 B	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js fix/swc-optimize-node-modules	Change
_buildManifest.js gzip	485 B	484 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix/swc-optimize-node-modules	Change
index.html gzip	528 B	527 B	N/A
link.html gzip	540 B	540 B	✓
withRouter.html gzip	524 B	522 B	N/A
Overall change	540 B	540 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js fix/swc-optimize-node-modules	Change
edge-ssr.js gzip	94.4 kB	94.4 kB	N/A
page.js gzip	151 kB	151 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js fix/swc-optimize-node-modules	Change
middleware-b..fest.js gzip	623 B	627 B	N/A
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	44.4 kB	44.4 kB	N/A
edge-runtime..pack.js gzip	1.94 kB	1.94 kB	✓
Overall change	2.1 kB	2.1 kB	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js fix/swc-optimize-node-modules	Change
app-page-exp...dev.js gzip	166 kB	166 kB	✓
app-page-exp..prod.js gzip	95.5 kB	95.5 kB	✓
app-page-tur..prod.js gzip	97.3 kB	97.3 kB	✓
app-page-tur..prod.js gzip	91.7 kB	91.7 kB	✓
app-page.run...dev.js gzip	136 kB	136 kB	✓
app-page.run..prod.js gzip	90.3 kB	90.3 kB	✓
app-route-ex...dev.js gzip	22 kB	22 kB	✓
app-route-ex..prod.js gzip	14.9 kB	14.9 kB	✓
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	✓
app-route-tu..prod.js gzip	14.6 kB	14.6 kB	✓
app-route.ru...dev.js gzip	21.7 kB	21.7 kB	✓
app-route.ru..prod.js gzip	14.6 kB	14.6 kB	✓
pages-api-tu..prod.js gzip	9.43 kB	9.43 kB	✓
pages-api.ru...dev.js gzip	9.7 kB	9.7 kB	✓
pages-api.ru..prod.js gzip	9.43 kB	9.43 kB	✓
pages-turbo...prod.js gzip	22 kB	22 kB	✓
pages.runtim...dev.js gzip	22.7 kB	22.7 kB	✓
pages.runtim..prod.js gzip	22 kB	22 kB	✓
server.runti..prod.js gzip	50 kB	50 kB	✓
Overall change	925 kB	925 kB	✓

build cache

	vercel/next.js canary	vercel/next.js fix/swc-optimize-node-modules	Change
0.pack gzip	1.55 MB	1.55 MB	N/A
index.pack gzip	103 kB	103 kB	N/A
Overall change	0 B	0 B	✓

Diff details

Diff for 1068-HASH.js

Diff too large to display

Diff for 4944-HASH.js

@@ -1,8 +1,8 @@
 "use strict";
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [4944],
+  [1363],
   {
-    /***/ 4944: /***/ function (module, exports, __webpack_require__) {
+    /***/ 1363: /***/ function (module, exports, __webpack_require__) {
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
         value: true,
@@ -13,25 +13,25 @@
           return Image;
         },
       });
-      const _interop_require_default = __webpack_require__(5811);
-      const _interop_require_wildcard = __webpack_require__(9075);
-      const _jsxruntime = __webpack_require__(6435);
+      const _interop_require_default = __webpack_require__(267);
+      const _interop_require_wildcard = __webpack_require__(9754);
+      const _jsxruntime = __webpack_require__(2260);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
-        __webpack_require__(8288)
+        __webpack_require__(4978)
       );
       const _reactdom = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(4364)
+        __webpack_require__(7)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1046)
+        __webpack_require__(4780)
       );
-      const _getimgprops = __webpack_require__(6028);
-      const _imageconfig = __webpack_require__(1939);
-      const _imageconfigcontextsharedruntime = __webpack_require__(9525);
-      const _warnonce = __webpack_require__(8915);
-      const _routercontextsharedruntime = __webpack_require__(9139);
+      const _getimgprops = __webpack_require__(8291);
+      const _imageconfig = __webpack_require__(8794);
+      const _imageconfigcontextsharedruntime = __webpack_require__(978);
+      const _warnonce = __webpack_require__(134);
+      const _routercontextsharedruntime = __webpack_require__(6183);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5732)
+        __webpack_require__(7857)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -42,7 +42,8 @@
         dangerouslyAllowSVG: false,
         unoptimized: false,
       };
-      if (false) {
+      if (typeof window === "undefined") {
+        globalThis.__NEXT_IMAGE_IMPORTED = true;
       }
       // See https://stackoverflow.com/q/39777833/266535 for why we use this ref
       // handler instead of the img's onLoad attribute.
@@ -362,7 +363,7 @@
       /***/
     },
 
-    /***/ 9331: /***/ function (
+    /***/ 5768: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -376,9 +377,9 @@
           return AmpStateContext;
         },
       });
-      const _interop_require_default = __webpack_require__(5811);
+      const _interop_require_default = __webpack_require__(267);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8288)
+        __webpack_require__(4978)
       );
       const AmpStateContext = _react.default.createContext({});
       if (false) {
@@ -387,7 +388,7 @@
       /***/
     },
 
-    /***/ 6039: /***/ function (__unused_webpack_module, exports) {
+    /***/ 9854: /***/ function (__unused_webpack_module, exports) {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -409,7 +410,7 @@
       /***/
     },
 
-    /***/ 6028: /***/ function (
+    /***/ 8291: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -423,9 +424,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(8915);
-      const _imageblursvg = __webpack_require__(1185);
-      const _imageconfig = __webpack_require__(1939);
+      const _warnonce = __webpack_require__(134);
+      const _imageblursvg = __webpack_require__(2769);
+      const _imageconfig = __webpack_require__(8794);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -794,7 +795,7 @@
       /***/
     },
 
-    /***/ 1046: /***/ function (module, exports, __webpack_require__) {
+    /***/ 4780: /***/ function (module, exports, __webpack_require__) {
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
         value: true,
@@ -815,19 +816,19 @@
           return _default;
         },
       });
-      const _interop_require_default = __webpack_require__(5811);
-      const _interop_require_wildcard = __webpack_require__(9075);
-      const _jsxruntime = __webpack_require__(6435);
+      const _interop_require_default = __webpack_require__(267);
+      const _interop_require_wildcard = __webpack_require__(9754);
+      const _jsxruntime = __webpack_require__(2260);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
-        __webpack_require__(8288)
+        __webpack_require__(4978)
       );
       const _sideeffect = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3273)
+        __webpack_require__(5743)
       );
-      const _ampcontextsharedruntime = __webpack_require__(9331);
-      const _headmanagercontextsharedruntime = __webpack_require__(1138);
-      const _ampmode = __webpack_require__(6039);
-      const _warnonce = __webpack_require__(8915);
+      const _ampcontextsharedruntime = __webpack_require__(5768);
+      const _headmanagercontextsharedruntime = __webpack_require__(6898);
+      const _ampmode = __webpack_require__(9854);
+      const _warnonce = __webpack_require__(134);
       function defaultHead(inAmpMode) {
         if (inAmpMode === void 0) inAmpMode = false;
         const head = [
@@ -1003,7 +1004,7 @@
       /***/
     },
 
-    /***/ 1185: /***/ function (__unused_webpack_module, exports) {
+    /***/ 2769: /***/ function (__unused_webpack_module, exports) {
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
        */
@@ -1057,7 +1058,7 @@
       /***/
     },
 
-    /***/ 9525: /***/ function (
+    /***/ 978: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1071,11 +1072,11 @@
           return ImageConfigContext;
         },
       });
-      const _interop_require_default = __webpack_require__(5811);
+      const _interop_require_default = __webpack_require__(267);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8288)
+        __webpack_require__(4978)
       );
-      const _imageconfig = __webpack_require__(1939);
+      const _imageconfig = __webpack_require__(8794);
       const ImageConfigContext = _react.default.createContext(
         _imageconfig.imageConfigDefault
       );
@@ -1085,7 +1086,7 @@
       /***/
     },
 
-    /***/ 1939: /***/ function (__unused_webpack_module, exports) {
+    /***/ 8794: /***/ function (__unused_webpack_module, exports) {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -1132,7 +1133,7 @@
       /***/
     },
 
-    /***/ 5732: /***/ function (__unused_webpack_module, exports) {
+    /***/ 7857: /***/ function (__unused_webpack_module, exports) {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -1165,7 +1166,7 @@
       /***/
     },
 
-    /***/ 9139: /***/ function (
+    /***/ 6183: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1179,9 +1180,9 @@
           return RouterContext;
         },
       });
-      const _interop_require_default = __webpack_require__(5811);
+      const _interop_require_default = __webpack_require__(267);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8288)
+        __webpack_require__(4978)
       );
       const RouterContext = _react.default.createContext(null);
       if (false) {
@@ -1190,7 +1191,7 @@
       /***/
     },
 
-    /***/ 3273: /***/ function (
+    /***/ 5743: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1204,8 +1205,8 @@
           return SideEffect;
         },
       });
-      const _react = __webpack_require__(8288);
-      const isServer = "object" === "undefined";
+      const _react = __webpack_require__(4978);
+      const isServer = typeof window === "undefined";
       const useClientOnlyLayoutEffect = isServer
         ? () => {}
         : _react.useLayoutEffect;

Commit: f844b99

packages/next/src/build/swc/options.ts

test/turbopack-tests-manifest.json

) Disable swc transform optimizer for node_modules in browser layer of app router bundles Fixes #61858 Fixes #60644 Fixes #60920 Fixes #61740 Closes NEXT-2418 In browser there could be not only one runtime, it could have both js worker and browser. In js worker the `typeof window` is not as same as in browser, so disabling the swc optimizer which will replace the code. Leave the condition as it as.

ijjk added area: tests created-by: Next.js team PRs by the Next.js team type: next labels Feb 14, 2024

huozhi mentioned this pull request Feb 14, 2024

In web worker, typeof window === 'undefined' is falsely bundled to true #61858

Closed

huozhi added 2 commits February 14, 2024 19:06

Fix extra swc optimizer applied to node_modules in browser layer

c3b4d8b

only disable globals

014a8b5

huozhi force-pushed the fix/swc-optimize-node-modules branch from c647027 to 014a8b5 Compare February 14, 2024 18:06

huozhi added 2 commits February 14, 2024 19:15

add into manifest

41f8064

only disable window

7d068db

huozhi marked this pull request as ready for review February 14, 2024 19:15

huozhi requested review from timneutkens, ijjk, shuding, a team, ztanner, feedthejim and wyattjoh as code owners February 14, 2024 19:15

ijjk reviewed Feb 14, 2024

View reviewed changes

packages/next/src/build/swc/options.ts Outdated Show resolved Hide resolved

safe check

6507516

huozhi requested a review from ijjk February 14, 2024 20:00

ijjk approved these changes Feb 14, 2024

View reviewed changes

huozhi added 2 commits February 14, 2024 21:27

fix typo

bd96d5a

Merge branch 'canary' into fix/swc-optimize-node-modules

f844b99

huozhi merged commit cfedc52 into canary Feb 14, 2024
65 of 70 checks passed

huozhi deleted the fix/swc-optimize-node-modules branch February 14, 2024 20:58

ForsakenHarmony reviewed Feb 14, 2024

View reviewed changes

test/turbopack-tests-manifest.json Show resolved Hide resolved

github-actions bot added the locked label Feb 29, 2024

github-actions bot locked as resolved and limited conversation to collaborators Feb 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix extra swc optimizer applied to node_modules in browser layer #62051

Fix extra swc optimizer applied to node_modules in browser layer #62051

huozhi commented Feb 14, 2024 •

edited

ijjk commented Feb 14, 2024 •

edited

ijjk commented Feb 14, 2024 •

edited

Fix extra swc optimizer applied to node_modules in browser layer #62051

Fix extra swc optimizer applied to node_modules in browser layer #62051

Conversation

huozhi commented Feb 14, 2024 • edited

What

Why

ijjk commented Feb 14, 2024 • edited

Tests Passed

ijjk commented Feb 14, 2024 • edited

Stats from current PR

huozhi commented Feb 14, 2024 •

edited

ijjk commented Feb 14, 2024 •

edited

ijjk commented Feb 14, 2024 •

edited