Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
Feb 14, 2024

Conversation

huozhi
Copy link
Member

@huozhi huozhi commented Feb 14, 2024

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
Copy link
Member

ijjk commented Feb 14, 2024

Tests Passed

@ijjk
Copy link
Member

ijjk commented Feb 14, 2024

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

@huozhi huozhi force-pushed the fix/swc-optimize-node-modules branch from c647027 to 014a8b5 Compare February 14, 2024 18:06
@huozhi huozhi marked this pull request as ready for review February 14, 2024 19:15
@huozhi huozhi requested a review from ijjk February 14, 2024 20:00
@huozhi huozhi merged commit cfedc52 into canary Feb 14, 2024
65 of 70 checks passed
@huozhi huozhi deleted the fix/swc-optimize-node-modules branch February 14, 2024 20:58
huozhi added a commit that referenced this pull request Feb 28, 2024
)

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.
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 29, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
3 participants