Use new JSX transform #56294

eps1lon · 2023-10-02T09:17:37Z

What?

Use new JSX transform

Why?

https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#motivation

How?

Switch to automatic runtime in transforms and react-jsx for TypeScript.

Verified by running pnpm build and inspecting packages/next/dist/client/components/react-dev-overlay/hot-reloader-client.js manually.

ijjk · 2023-10-02T09:18:01Z

Allow CI Workflow Run

approve CI run for commit: 6d06264

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

ijjk · 2023-10-02T09:25:36Z

Tests Passed

ijjk · 2023-10-02T09:54:22Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	eps1lon/next.js feat/automatic-runtime	Change
buildDuration	10.7s	10.6s	N/A
buildDurationCached	6s	6.1s	⚠️ +103ms
nodeModulesSize	199 MB	200 MB	⚠️ +168 kB
nextStartRea..uration (ms)	425ms	423ms	N/A

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	eps1lon/next.js feat/automatic-runtime	Change
170-HASH.js gzip	26.7 kB	26.9 kB	⚠️ +228 B
199.HASH.js gzip	181 B	185 B	N/A
3f784ff6-HASH.js gzip	53.3 kB	53.3 kB	✓
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	240 B	241 B	N/A
main-HASH.js gzip	31.7 kB	31.7 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	N/A
Overall change	125 kB	125 kB	⚠️ +228 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	eps1lon/next.js feat/automatic-runtime	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	eps1lon/next.js feat/automatic-runtime	Change
_app-HASH.js gzip	195 B	194 B	N/A
_error-HASH.js gzip	183 B	182 B	N/A
amp-HASH.js gzip	501 B	501 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	255 B	255 B	✓
head-HASH.js gzip	349 B	350 B	N/A
hooks-HASH.js gzip	368 B	369 B	N/A
image-HASH.js gzip	4.27 kB	4.27 kB	N/A
index-HASH.js gzip	255 B	256 B	N/A
link-HASH.js gzip	2.6 kB	2.6 kB	N/A
routerDirect..HASH.js gzip	311 B	309 B	N/A
script-HASH.js gzip	384 B	384 B	✓
withRouter-HASH.js gzip	307 B	306 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	1.57 kB	1.57 kB	✓

Client Build Manifests

	vercel/next.js canary	eps1lon/next.js feat/automatic-runtime	Change
_buildManifest.js gzip	483 B	482 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	eps1lon/next.js feat/automatic-runtime	Change
index.html gzip	529 B	527 B	N/A
link.html gzip	542 B	540 B	N/A
withRouter.html gzip	524 B	523 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size Overall increase ⚠️

	vercel/next.js canary	eps1lon/next.js feat/automatic-runtime	Change
edge-ssr.js gzip	93.5 kB	93.8 kB	⚠️ +214 B
page.js gzip	146 kB	146 kB	⚠️ +257 B
Overall change	239 kB	240 kB	⚠️ +471 B

Middleware size

	vercel/next.js canary	eps1lon/next.js feat/automatic-runtime	Change
middleware-b..fest.js gzip	622 B	623 B	N/A
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	37.4 kB	37.4 kB	N/A
edge-runtime..pack.js gzip	1.92 kB	1.92 kB	✓
Overall change	2.07 kB	2.07 kB	✓

Next Runtimes

	vercel/next.js canary	eps1lon/next.js feat/automatic-runtime	Change
app-page-exp...dev.js gzip	168 kB	168 kB	N/A
app-page-exp..prod.js gzip	93.9 kB	94 kB	N/A
app-page-tur..prod.js gzip	94.7 kB	94.7 kB	N/A
app-page-tur..prod.js gzip	89.2 kB	89.3 kB	N/A
app-page.run...dev.js gzip	138 kB	138 kB	N/A
app-page.run..prod.js gzip	88.6 kB	88.6 kB	N/A
app-route-ex...dev.js gzip	24 kB	24 kB	✓
app-route-ex..prod.js gzip	16.7 kB	16.7 kB	✓
app-route-tu..prod.js gzip	16.7 kB	16.7 kB	✓
app-route-tu..prod.js gzip	16.3 kB	16.3 kB	✓
app-route.ru...dev.js gzip	23.4 kB	23.4 kB	✓
app-route.ru..prod.js gzip	16.3 kB	16.3 kB	✓
pages-api-tu..prod.js gzip	9.37 kB	9.37 kB	✓
pages-api.ru...dev.js gzip	9.64 kB	9.64 kB	✓
pages-api.ru..prod.js gzip	9.37 kB	9.37 kB	✓
pages-turbo...prod.js gzip	21.9 kB	22 kB	N/A
pages.runtim...dev.js gzip	22.6 kB	22.6 kB	N/A
pages.runtim..prod.js gzip	21.9 kB	21.9 kB	N/A
server.runti..prod.js gzip	49.4 kB	49.4 kB	✓
Overall change	191 kB	191 kB	✓

Diff details

Diff for page.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for dynamic-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [739],
   {
-    /***/ 8484: /***/ function (
+    /***/ 9816: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/dynamic",
         function () {
-          return __webpack_require__(1752);
+          return __webpack_require__(2646);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 6595: /***/ function (module, exports, __webpack_require__) {
+    /***/ 9588: /***/ function (module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -41,11 +41,12 @@
         },
       });
       const _interop_require_default = __webpack_require__(1351);
+      const _jsxruntime = __webpack_require__(1527);
       const _react = /*#__PURE__*/ _interop_require_default._(
         __webpack_require__(959)
       );
       const _loadablesharedruntime = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5643)
+        __webpack_require__(2397)
       );
       const isServerSide = "object" === "undefined";
       // Normalize loader to return the module as form { default: Component } for `React.lazy`.
@@ -67,7 +68,7 @@
         const Loading = loadableOptions.loading;
         // This will only be rendered on the server side
         return () =>
-          /*#__PURE__*/ _react.default.createElement(Loading, {
+          /*#__PURE__*/ (0, _jsxruntime.jsx)(Loading, {
             error: null,
             isLoading: true,
             pastDelay: false,
@@ -146,7 +147,7 @@
       /***/
     },
 
-    /***/ 1674: /***/ function (
+    /***/ 3047: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -173,7 +174,7 @@
       /***/
     },
 
-    /***/ 5643: /***/ function (
+    /***/ 2397: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -215,7 +216,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       const _react = /*#__PURE__*/ _interop_require_default._(
         __webpack_require__(959)
       );
-      const _loadablecontextsharedruntime = __webpack_require__(1674);
+      const _loadablecontextsharedruntime = __webpack_require__(3047);
       function resolve(obj) {
         return obj && obj.default ? obj.default : obj;
       }
@@ -450,7 +451,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       /***/
     },
 
-    /***/ 1752: /***/ function (
+    /***/ 2646: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -466,7 +467,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(1527);
       /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(5620);
+        __webpack_require__(4438);
       /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_dynamic__WEBPACK_IMPORTED_MODULE_1__
@@ -475,11 +476,11 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       const DynamicHello = next_dynamic__WEBPACK_IMPORTED_MODULE_1___default()(
         () =>
           __webpack_require__
-            .e(/* import() */ 199)
-            .then(__webpack_require__.bind(__webpack_require__, 9199)),
+            .e(/* import() */ 639)
+            .then(__webpack_require__.bind(__webpack_require__, 2639)),
         {
           loadableGenerated: {
-            webpack: () => [/*require.resolve*/ 9199],
+            webpack: () => [/*require.resolve*/ 2639],
           },
         }
       );
@@ -506,12 +507,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       /***/
     },
 
-    /***/ 5620: /***/ function (
+    /***/ 4438: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(6595);
+      module.exports = __webpack_require__(9588);
 
       /***/
     },
@@ -521,8 +522,8 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
     /******/ var __webpack_exec__ = function (moduleId) {
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
-    /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(8484);
+    /******/ __webpack_require__.O(0, [888, 774, 179], function () {
+      return __webpack_exec__(9816);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [358],
   {
-    /***/ 1552: /***/ function (
+    /***/ 4070: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(7459);
+          return __webpack_require__(3489);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 7534: /***/ function (module, exports, __webpack_require__) {
+    /***/ 2145: /***/ function (module, exports, __webpack_require__) {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -32,6 +32,7 @@
       });
       const _interop_require_default = __webpack_require__(1351);
       const _interop_require_wildcard = __webpack_require__(5815);
+      const _jsxruntime = __webpack_require__(1527);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
         __webpack_require__(959)
       );
@@ -39,15 +40,15 @@
         __webpack_require__(422)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(4684)
+        __webpack_require__(9762)
       );
-      const _getimgprops = __webpack_require__(8622);
-      const _imageconfig = __webpack_require__(2584);
-      const _imageconfigcontextsharedruntime = __webpack_require__(8266);
-      const _warnonce = __webpack_require__(7604);
-      const _routercontextsharedruntime = __webpack_require__(2274);
+      const _getimgprops = __webpack_require__(9642);
+      const _imageconfig = __webpack_require__(37);
+      const _imageconfigcontextsharedruntime = __webpack_require__(371);
+      const _warnonce = __webpack_require__(6636);
+      const _routercontextsharedruntime = __webpack_require__(7865);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8293)
+        __webpack_require__(4526)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -168,7 +169,7 @@
             onError,
             ...rest
           } = param;
-          return /*#__PURE__*/ _react.default.createElement("img", {
+          return /*#__PURE__*/ (0, _jsxruntime.jsx)("img", {
             ...rest,
             ...getDynamicProps(fetchPriority),
             // It's intended to keep `loading` before `src` because React updates
@@ -273,25 +274,25 @@
           _reactdom.default.preload(imgAttributes.src, opts);
           return null;
         }
-        return /*#__PURE__*/ _react.default.createElement(
-          _head.default,
-          null,
-          /*#__PURE__*/ _react.default.createElement("link", {
-            key:
-              "__nimg-" +
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_head.default, {
+          children: /*#__PURE__*/ (0, _jsxruntime.jsx)(
+            "link",
+            {
+              rel: "preload",
+              // Note how we omit the `href` attribute, as it would only be relevant
+              // for browsers that do not support `imagesrcset`, and in those cases
+              // it would cause the incorrect image to be preloaded.
+              //
+              // https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset
+              href: imgAttributes.srcSet ? undefined : imgAttributes.src,
+              ...opts,
+            },
+            "__nimg-" +
               imgAttributes.src +
               imgAttributes.srcSet +
-              imgAttributes.sizes,
-            rel: "preload",
-            // Note how we omit the `href` attribute, as it would only be relevant
-            // for browsers that do not support `imagesrcset`, and in those cases
-            // it would cause the incorrect image to be preloaded.
-            //
-            // https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset
-            href: imgAttributes.srcSet ? undefined : imgAttributes.src,
-            ...opts,
-          })
-        );
+              imgAttributes.sizes
+          ),
+        });
       }
       const Image = /*#__PURE__*/ (0, _react.forwardRef)(
         (props, forwardedRef) => {
@@ -334,27 +335,27 @@
             blurComplete,
             showAltText,
           });
-          return /*#__PURE__*/ _react.default.createElement(
-            _react.default.Fragment,
-            null,
-            /*#__PURE__*/ _react.default.createElement(ImageElement, {
-              ...imgAttributes,
-              unoptimized: imgMeta.unoptimized,
-              placeholder: imgMeta.placeholder,
-              fill: imgMeta.fill,
-              onLoadRef: onLoadRef,
-              onLoadingCompleteRef: onLoadingCompleteRef,
-              setBlurComplete: setBlurComplete,
-              setShowAltText: setShowAltText,
-              ref: forwardedRef,
-            }),
-            imgMeta.priority
-              ? /*#__PURE__*/ _react.default.createElement(ImagePreload, {
-                  isAppRouter: isAppRouter,
-                  imgAttributes: imgAttributes,
-                })
-              : null
-          );
+          return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+              /*#__PURE__*/ (0, _jsxruntime.jsx)(ImageElement, {
+                ...imgAttributes,
+                unoptimized: imgMeta.unoptimized,
+                placeholder: imgMeta.placeholder,
+                fill: imgMeta.fill,
+                onLoadRef: onLoadRef,
+                onLoadingCompleteRef: onLoadingCompleteRef,
+                setBlurComplete: setBlurComplete,
+                setShowAltText: setShowAltText,
+                ref: forwardedRef,
+              }),
+              imgMeta.priority
+                ? /*#__PURE__*/ (0, _jsxruntime.jsx)(ImagePreload, {
+                    isAppRouter: isAppRouter,
+                    imgAttributes: imgAttributes,
+                  })
+                : null,
+            ],
+          });
         }
       );
       if (
@@ -372,7 +373,7 @@
       /***/
     },
 
-    /***/ 8622: /***/ function (
+    /***/ 9642: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -388,9 +389,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(7604);
-      const _imageblursvg = __webpack_require__(6528);
-      const _imageconfig = __webpack_require__(2584);
+      const _warnonce = __webpack_require__(6636);
+      const _imageblursvg = __webpack_require__(9354);
+      const _imageconfig = __webpack_require__(37);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -759,7 +760,7 @@
       /***/
     },
 
-    /***/ 6528: /***/ function (__unused_webpack_module, exports) {
+    /***/ 9354: /***/ function (__unused_webpack_module, exports) {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -814,7 +815,7 @@
       /***/
     },
 
-    /***/ 1406: /***/ function (
+    /***/ 3569: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -841,11 +842,11 @@
         },
       });
       const _interop_require_default = __webpack_require__(1351);
-      const _getimgprops = __webpack_require__(8622);
-      const _warnonce = __webpack_require__(7604);
-      const _imagecomponent = __webpack_require__(7534);
+      const _getimgprops = __webpack_require__(9642);
+      const _warnonce = __webpack_require__(6636);
+      const _imagecomponent = __webpack_require__(2145);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8293)
+        __webpack_require__(4526)
       );
       const unstable_getImgProps = (imgProps) => {
         (0, _warnonce.warnOnce)(
@@ -877,7 +878,7 @@
       /***/
     },
 
-    /***/ 8293: /***/ function (__unused_webpack_module, exports) {
+    /***/ 4526: /***/ function (__unused_webpack_module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -912,7 +913,7 @@
       /***/
     },
 
-    /***/ 7459: /***/ function (
+    /***/ 3489: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -933,8 +934,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(1527);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected][email protected]/node_modules/next/image.js
-      var next_image = __webpack_require__(1577);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected][email protected]/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 */ var nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -964,12 +965,12 @@
       /***/
     },
 
-    /***/ 1577: /***/ function (
+    /***/ 73: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(1406);
+      module.exports = __webpack_require__(3569);
 
       /***/
     },
@@ -979,8 +980,8 @@
     /******/ var __webpack_exec__ = function (moduleId) {
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
-    /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(1552);
+    /******/ __webpack_require__.O(0, [888, 774, 179], function () {
+      return __webpack_exec__(4070);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for link-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [644],
   {
-    /***/ 5310: /***/ function (
+    /***/ 8959: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/link",
         function () {
-          return __webpack_require__(6108);
+          return __webpack_require__(498);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 5060: /***/ function (module, exports) {
+    /***/ 7699: /***/ function (module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -100,7 +100,7 @@
       /***/
     },
 
-    /***/ 514: /***/ function (module, exports, __webpack_require__) {
+    /***/ 7642: /***/ function (module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -112,7 +112,7 @@
           return getDomainLocale;
         },
       });
-      const _normalizetrailingslash = __webpack_require__(1638);
+      const _normalizetrailingslash = __webpack_require__(8809);
       const basePath =
         /* unused pure expression or super */ null && (false || "");
       function getDomainLocale(path, locale, locales, domainLocales) {
@@ -136,7 +136,7 @@
       /***/
     },
 
-    /***/ 8949: /***/ function (module, exports, __webpack_require__) {
+    /***/ 3290: /***/ function (module, exports, __webpack_require__) {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -149,20 +149,21 @@
         },
       });
       const _interop_require_default = __webpack_require__(1351);
+      const _jsxruntime = __webpack_require__(1527);
       const _react = /*#__PURE__*/ _interop_require_default._(
         __webpack_require__(959)
       );
-      const _resolvehref = __webpack_require__(7515);
-      const _islocalurl = __webpack_require__(9517);
-      const _formaturl = __webpack_require__(2797);
-      const _utils = __webpack_require__(7001);
-      const _addlocale = __webpack_require__(2123);
-      const _routercontextsharedruntime = __webpack_require__(2274);
-      const _approutercontextsharedruntime = __webpack_require__(5294);
-      const _useintersection = __webpack_require__(9242);
-      const _getdomainlocale = __webpack_require__(514);
-      const _addbasepath = __webpack_require__(4862);
-      const _routerreducertypes = __webpack_require__(5060);
+      const _resolvehref = __webpack_require__(730);
+      const _islocalurl = __webpack_require__(8765);
+      const _formaturl = __webpack_require__(8557);
+      const _utils = __webpack_require__(1099);
+      const _addlocale = __webpack_require__(3973);
+      const _routercontextsharedruntime = __webpack_require__(7865);
+      const _approutercontextsharedruntime = __webpack_require__(2212);
+      const _useintersection = __webpack_require__(495);
+      const _getdomainlocale = __webpack_require__(7642);
+      const _addbasepath = __webpack_require__(4777);
+      const _routerreducertypes = __webpack_require__(7699);
       const prefetched = new Set();
       function prefetch(router, href, as, options, appOptions, isAppRouter) {
         if (false) {
@@ -288,11 +289,9 @@
             legacyBehavior &&
             (typeof children === "string" || typeof children === "number")
           ) {
-            children = /*#__PURE__*/ _react.default.createElement(
-              "a",
-              null,
-              children
-            );
+            children = /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
+              children: children,
+            });
           }
           const pagesRouter = _react.default.useContext(
             _routercontextsharedruntime.RouterContext
@@ -552,14 +551,11 @@
           }
           return legacyBehavior
             ? /*#__PURE__*/ _react.default.cloneElement(child, childProps)
-            : /*#__PURE__*/ _react.default.createElement(
-                "a",
-                {
-                  ...restProps,
-                  ...childProps,
-                },
-                children
-              );
+            : /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
+                ...restProps,
+                ...childProps,
+                children: children,
+              });
         }
       );
       const _default = Link;
@@ -578,7 +574,7 @@
       /***/
     },
 
-    /***/ 9242: /***/ function (module, exports, __webpack_require__) {
+    /***/ 495: /***/ function (module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -591,7 +587,7 @@
         },
       });
       const _react = __webpack_require__(959);
-      const _requestidlecallback = __webpack_require__(7495);
+      const _requestidlecallback = __webpack_require__(9952);
       const hasIntersectionObserver =
         typeof IntersectionObserver === "function";
       const observers = new Map();
@@ -704,7 +700,7 @@
       /***/
     },
 
-    /***/ 6108: /***/ function (
+    /***/ 498: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -720,7 +716,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(1527);
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(3639);
+        __webpack_require__(2075);
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_link__WEBPACK_IMPORTED_MODULE_1__
@@ -751,12 +747,12 @@
       /***/
     },
 
-    /***/ 3639: /***/ function (
+    /***/ 2075: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(8949);
+      module.exports = __webpack_require__(3290);
 
       /***/
     },
@@ -766,8 +762,8 @@
     /******/ var __webpack_exec__ = function (moduleId) {
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
-    /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(5310);
+    /******/ __webpack_require__.O(0, [888, 774, 179], function () {
+      return __webpack_exec__(8959);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 170-HASH.js

Diff too large to display

Diff for _not-found-4..8d5a690ee.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [165],
   {
-    /***/ 1729: /***/ function (
+    /***/ 5194: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_not-found",
         function () {
-          return __webpack_require__(7200);
+          return __webpack_require__(3514);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 7200: /***/ function (module, exports, __webpack_require__) {
+    /***/ 3514: /***/ function (module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -31,8 +31,9 @@
         },
       });
       const _interop_require_default = __webpack_require__(7295);
+      const _jsxruntime = __webpack_require__(2260);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8288)
+        __webpack_require__(4978)
       );
       const styles = {
         error: {
@@ -66,25 +67,18 @@
         },
       };
       function NotFound() {
-        return /*#__PURE__*/ _react.default.createElement(
-          _react.default.Fragment,
-          null,
-          /*#__PURE__*/ _react.default.createElement(
-            "title",
-            null,
-            "404: This page could not be found."
-          ),
-          /*#__PURE__*/ _react.default.createElement(
-            "div",
-            {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+          children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("title", {
+              children: "404: This page could not be found.",
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
               style: styles.error,
-            },
-            /*#__PURE__*/ _react.default.createElement(
-              "div",
-              null,
-              /*#__PURE__*/ _react.default.createElement("style", {
-                dangerouslySetInnerHTML: {
-                  /* Minified CSS from
+              children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                children: [
+                  /*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
+                    dangerouslySetInnerHTML: {
+                      /* Minified CSS from
                 body { margin: 0; color: #000; background: #fff; }
                 .next-error-h1 {
                   border-right: 1px solid rgba(0, 0, 0, .3);
@@ -97,33 +91,26 @@
                   }
                 }
               */ __html:
-                    "body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}",
-                },
+                        "body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}",
+                    },
+                  }),
+                  /*#__PURE__*/ (0, _jsxruntime.jsx)("h1", {
+                    className: "next-error-h1",
+                    style: styles.h1,
+                    children: "404",
+                  }),
+                  /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    style: styles.desc,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("h2", {
+                      style: styles.h2,
+                      children: "This page could not be found.",
+                    }),
+                  }),
+                ],
               }),
-              /*#__PURE__*/ _react.default.createElement(
-                "h1",
-                {
-                  className: "next-error-h1",
-                  style: styles.h1,
-                },
-                "404"
-              ),
-              /*#__PURE__*/ _react.default.createElement(
-                "div",
-                {
-                  style: styles.desc,
-                },
-                /*#__PURE__*/ _react.default.createElement(
-                  "h2",
-                  {
-                    style: styles.h2,
-                  },
-                  "This page could not be found."
-                )
-              )
-            )
-          )
-        );
+            }),
+          ],
+        });
       }
       if (
         (typeof exports.default === "function" ||
@@ -145,8 +132,8 @@
     /******/ var __webpack_exec__ = function (moduleId) {
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
-    /******/ __webpack_require__.O(0, [904, 170, 744], function () {
-      return __webpack_exec__(1729);
+    /******/ __webpack_require__.O(0, [658, 506, 744], function () {
+      return __webpack_exec__(5194);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

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 pages-turbo...time.prod.js

Diff too large to display

Diff for pages.runtime.dev.js

Diff too large to display

Diff for pages.runtime.prod.js

Diff too large to display

Commit: 4de28cf

eps1lon · 2023-10-05T15:24:06Z

packages/next/src/build/analysis/get-page-static-info.ts

@@ -484,7 +484,7 @@ export async function getPageStaticInfo(params: {

  const fileContent = (await tryToReadFile(pageFilePath, !isDev)) || ''
  if (
-    /runtime|preferredRegion|getStaticProps|getServerSideProps|generateStaticParams|export const/.test(
+    /(?<!(_jsx|jsx-))runtime|preferredRegion|getStaticProps|getServerSideProps|generateStaticParams|export const/.test(


Otherwise this pattern would now match any basic file that had JSX since the transform transpiles it to

var _jsxRuntime = require("react/jsx-runtime"); /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});

A more broader fix would ignore any prefix instead of using this negative lookbehind e.g. (\s+(runtime|preferredRegion|getStaticProps|getServerSideProps|generateStaticParams)|export const).

can we change to jsx-runtime as they're case-sensitive here, we don't need to check _jsxRuntime here?

Yep, makes sense.

Hm I remember adding it on purpose though theoretically I'd agree with your assesment. But in practice, the test is failing without it.

I guess SWC is transpiling it differently. Babel generates var _jsxRuntime but SWC outputs var _jsxruntime.

This PR enables the generation of source maps for the bundled runtimes. This is fast enough that we can just use the optimal source map option directly. This is useful if you're having some errors in Next.js itself.

This reverts commit 4971957.

huozhi · 2023-12-08T23:32:56Z

Thank you!

It seems the intention of this test was to verify that the rewritten file matches the original file, but it does so by just asserting on arbitrary script text, which is brittle and broke as a result of vercel/next.js#56294 The right way to test this would be to fetch the original script and compare the contents with the rewritten script, but this relies on `__NEXT_SCRIPT__` magic which is only available in probe checks. For now this just asserts on a valid status code, as a chunk that isn't properly rewritten should 404 in this case.

ijjk added examples Issue/PR related to examples type: next labels Oct 2, 2023

huozhi added the CI approved Approve running CI for fork label Oct 2, 2023

eps1lon force-pushed the feat/automatic-runtime branch from 6d06264 to 0b14d4f Compare October 2, 2023 09:48

eps1lon marked this pull request as ready for review October 2, 2023 11:14

eps1lon requested review from leerob, a team, timneutkens, ijjk, shuding, huozhi, feedthejim, ztanner and wyattjoh as code owners October 2, 2023 11:14

eps1lon requested review from molebox and removed request for a team October 2, 2023 11:14

eps1lon force-pushed the feat/automatic-runtime branch from 874b27c to fe04b9f Compare October 2, 2023 12:12

eps1lon changed the title ~~[draft] Use new JSX transform~~ Use new JSX transform Oct 4, 2023

eps1lon requested a review from a team as a code owner October 5, 2023 15:20

eps1lon commented Oct 5, 2023

View reviewed changes

eps1lon and others added 4 commits October 16, 2023 18:35

Ship with automatic runtime

216487a

misc: enable source maps for bundled runtime (vercel#56289)

6a642a5

This PR enables the generation of source maps for the bundled runtimes. This is fast enough that we can just use the optimal source map option directly. This is useful if you're having some errors in Next.js itself.

Update snapshots

15214a4

Restore status quo

a325436

eps1lon force-pushed the feat/automatic-runtime branch from f229292 to a325436 Compare October 16, 2023 16:38

Check if jsx-runtime is sufficient

4971957

Sebastian Silbermann and others added 4 commits October 16, 2023 19:18

Revert "Check if jsx-runtime is sufficient"

6bb38cb

This reverts commit 4971957.

Merge branch 'canary' into feat/automatic-runtime

64fe6b1

rm default value

7f93139

Merge branch 'canary' into feat/automatic-runtime

4de28cf

huozhi approved these changes Dec 8, 2023

View reviewed changes

huozhi merged commit 79a8d01 into vercel:canary Dec 8, 2023
68 checks passed

eps1lon deleted the feat/automatic-runtime branch December 9, 2023 11:58

ztanner mentioned this pull request Dec 11, 2023

[tests] fix brittle next rewrite probe test vercel/vercel#10934

Merged

github-actions bot added the locked label Dec 23, 2023

github-actions bot locked as resolved and limited conversation to collaborators Dec 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use new JSX transform #56294

Use new JSX transform #56294

eps1lon commented Oct 2, 2023 •

edited

Loading

ijjk commented Oct 2, 2023 •

edited by huozhi

Loading

ijjk commented Oct 2, 2023 •

edited

Loading

ijjk commented Oct 2, 2023 •

edited

Loading

eps1lon Oct 5, 2023 •

edited

Loading

huozhi Oct 6, 2023

eps1lon Oct 16, 2023

eps1lon Oct 16, 2023

eps1lon Oct 16, 2023

huozhi commented Dec 8, 2023

Use new JSX transform #56294

Use new JSX transform #56294

Conversation

eps1lon commented Oct 2, 2023 • edited Loading

What?

Why?

How?

ijjk commented Oct 2, 2023 • edited by huozhi Loading

ijjk commented Oct 2, 2023 • edited Loading

Tests Passed

ijjk commented Oct 2, 2023 • edited Loading

Stats from current PR

eps1lon Oct 5, 2023 • edited Loading

Choose a reason for hiding this comment

huozhi Oct 6, 2023

Choose a reason for hiding this comment

eps1lon Oct 16, 2023

Choose a reason for hiding this comment

eps1lon Oct 16, 2023

Choose a reason for hiding this comment

eps1lon Oct 16, 2023

Choose a reason for hiding this comment

huozhi commented Dec 8, 2023

eps1lon commented Oct 2, 2023 •

edited

Loading

ijjk commented Oct 2, 2023 •

edited by huozhi

Loading

ijjk commented Oct 2, 2023 •

edited

Loading

ijjk commented Oct 2, 2023 •

edited

Loading

eps1lon Oct 5, 2023 •

edited

Loading