[Not for merge] Update React from a26e3f403e to f3e09d6328

package.json

@@ -200,19 +200,19 @@
     "pretty-bytes": "5.3.0",
     "pretty-ms": "7.0.0",
     "random-seed": "0.3.0",
-    "react": "19.0.0-rc-a26e3f403e-20240611",
+    "react": "19.0.0-rc-f3e09d6328-20240612",
     "react-17": "npm:[email protected]",
-    "react-builtin": "npm:[email protected]a26e3f403e-20240611",
-    "react-dom": "19.0.0-rc-a26e3f403e-20240611",
+    "react-builtin": "npm:[email protected]f3e09d6328-20240612",
+    "react-dom": "19.0.0-rc-f3e09d6328-20240612",
     "react-dom-17": "npm:[email protected]",
-    "react-dom-builtin": "npm:[email protected]a26e3f403e-20240611",
-    "react-dom-experimental-builtin": "npm:[email protected]a26e3f403e-20240611",
-    "react-experimental-builtin": "npm:[email protected]a26e3f403e-20240611",
-    "react-is-builtin": "npm:[email protected]a26e3f403e-20240611",
-    "react-server-dom-turbopack": "19.0.0-rc-a26e3f403e-20240611",
-    "react-server-dom-turbopack-experimental": "npm:[email protected]a26e3f403e-20240611",
-    "react-server-dom-webpack": "19.0.0-rc-a26e3f403e-20240611",
-    "react-server-dom-webpack-experimental": "npm:[email protected]a26e3f403e-20240611",
+    "react-dom-builtin": "npm:[email protected]f3e09d6328-20240612",
+    "react-dom-experimental-builtin": "npm:[email protected]f3e09d6328-20240612",
+    "react-experimental-builtin": "npm:[email protected]f3e09d6328-20240612",
+    "react-is-builtin": "npm:[email protected]f3e09d6328-20240612",
+    "react-server-dom-turbopack": "19.0.0-rc-f3e09d6328-20240612",
+    "react-server-dom-turbopack-experimental": "npm:[email protected]f3e09d6328-20240612",
+    "react-server-dom-webpack": "19.0.0-rc-f3e09d6328-20240612",
+    "react-server-dom-webpack-experimental": "npm:[email protected]f3e09d6328-20240612",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",
@@ -222,8 +222,8 @@
     "resolve-from": "5.0.0",
     "sass": "1.54.0",
     "satori": "0.10.9",
-    "scheduler-builtin": "npm:[email protected]a26e3f403e-20240611",
-    "scheduler-experimental-builtin": "npm:[email protected]a26e3f403e-20240611",
+    "scheduler-builtin": "npm:[email protected]f3e09d6328-20240612",
+    "scheduler-experimental-builtin": "npm:[email protected]f3e09d6328-20240612",
     "seedrandom": "3.0.5",
     "semver": "7.3.7",
     "shell-quote": "1.7.3",
@@ -257,10 +257,10 @@
     "@babel/traverse": "7.22.5",
     "@types/react": "npm:[email protected]",
     "@types/react-dom": "npm:[email protected]",
-    "react": "19.0.0-rc-a26e3f403e-20240611",
-    "react-dom": "19.0.0-rc-a26e3f403e-20240611",
-    "react-is": "19.0.0-rc-a26e3f403e-20240611",
-    "scheduler": "0.25.0-rc-a26e3f403e-20240611"
+    "react": "19.0.0-rc-f3e09d6328-20240612",
+    "react-dom": "19.0.0-rc-f3e09d6328-20240612",
+    "react-is": "19.0.0-rc-f3e09d6328-20240612",
+    "scheduler": "0.25.0-rc-f3e09d6328-20240612"
   },
   "engines": {
     "node": ">=18.18.0",

packages/create-next-app/templates/index.ts

@@ -184,8 +184,8 @@ export const installTemplate = async ({
      * Default dependencies.
      */
     dependencies: {
-      react: "19.0.0-rc-a26e3f403e-20240611",
-      "react-dom": "19.0.0-rc-a26e3f403e-20240611",
+      react: "19.0.0-rc-f3e09d6328-20240612",
+      "react-dom": "19.0.0-rc-f3e09d6328-20240612",
       next: version,
     },
     devDependencies: {},

packages/next/package.json

@@ -105,8 +105,8 @@
     "@opentelemetry/api": "^1.1.0",
     "@playwright/test": "^1.41.2",
     "babel-plugin-react-compiler": "*",
-    "react": "19.0.0-rc-a26e3f403e-20240611",
-    "react-dom": "19.0.0-rc-a26e3f403e-20240611",
+    "react": "19.0.0-rc-f3e09d6328-20240612",
+    "react-dom": "19.0.0-rc-f3e09d6328-20240612",
     "sass": "^1.3.0"
   },
   "peerDependenciesMeta": {

packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx

@@ -47,17 +47,35 @@ let __nextDevClientId = Math.round(Math.random() * 100 + Date.now())
 let reloading = false
 let startLatency: number | null = null
 
-function onBeforeFastRefresh(dispatcher: Dispatcher, hasUpdates: boolean) {
+let pendingHotUpdateWebpack = Promise.resolve()
+let resolvePendingHotUpdateWebpack: () => void = () => {}
+function setPendingHotUpdateWebpack() {
+  pendingHotUpdateWebpack = new Promise((resolve) => {
+    resolvePendingHotUpdateWebpack = () => {
+      resolve()
+    }
+  })
+}
+
+export function waitForWebpackRuntimeHotUpdate() {
+  return pendingHotUpdateWebpack
+}
+
+function handleBeforeHotUpdateWebpack(
+  dispatcher: Dispatcher,
+  hasUpdates: boolean
+) {
   if (hasUpdates) {
     dispatcher.onBeforeRefresh()
   }
 }
 
-function onFastRefresh(
+function handleSuccessfulHotUpdateWebpack(
   dispatcher: Dispatcher,
   sendMessage: (message: string) => void,
   updatedModules: ReadonlyArray<string>
 ) {
+  resolvePendingHotUpdateWebpack()
   dispatcher.onBuildOk()
 
   reportHmrLatency(sendMessage, updatedModules)
@@ -281,12 +299,16 @@ function processMessage(
     } else {
       tryApplyUpdates(
         function onBeforeHotUpdate(hasUpdates: boolean) {
-          onBeforeFastRefresh(dispatcher, hasUpdates)
+          handleBeforeHotUpdateWebpack(dispatcher, hasUpdates)
         },
         function onSuccessfulHotUpdate(webpackUpdatedModules: string[]) {
           // Only dismiss it when we're sure it's a hot update.
           // Otherwise it would flicker right before the reload.
-          onFastRefresh(dispatcher, sendMessage, webpackUpdatedModules)
+          handleSuccessfulHotUpdateWebpack(
+            dispatcher,
+            sendMessage,
+            webpackUpdatedModules
+          )
         },
         sendMessage,
         dispatcher
@@ -320,6 +342,9 @@ function processMessage(
     }
     case HMR_ACTIONS_SENT_TO_BROWSER.BUILDING: {
       startLatency = Date.now()
+      if (!process.env.TURBOPACK) {
+        setPendingHotUpdateWebpack()
+      }
       console.log('[Fast Refresh] rebuilding')
       break
     }

packages/next/src/client/components/router-reducer/fetch-server-response.ts

@@ -29,6 +29,7 @@ import { urlToUrlWithoutFlightMarker } from '../app-router'
 import { callServer } from '../../app-call-server'
 import { PrefetchKind } from './router-reducer-types'
 import { hexHash } from '../../../shared/lib/hash'
+import { waitForWebpackRuntimeHotUpdate } from '../react-dev-overlay/app/hot-reloader-client'
 
 export type FetchServerResponseResult = [
   flightData: FlightData,
@@ -152,6 +153,14 @@ export async function fetchServerResponse(
       return doMpaNavigation(responseUrl.toString())
     }
 
+    // We may navigate to a page that requires a different Webpack runtime.
+    // In prod, every page will have the same Webpack runtime.
+    // In dev, the Webpack runtime is minimal for each page.
+    // We need to ensure the Webpack runtime is updated before executing client-side JS of the new page.
+    if (process.env.NODE_ENV !== 'production') {
+      await waitForWebpackRuntimeHotUpdate()
+    }
+
     // Handle the `fetch` readable stream that can be unwrapped by `React.use`.
     const [buildId, flightData]: NextFlightResponse = await createFromFetch(
       Promise.resolve(res),

packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.development.js

@@ -291,6 +291,14 @@
           if ("function" === typeof type)
             return type.displayName || type.name || null;
           if ("string" === typeof type) return type;
+          break;
+        case 29:
+          type = fiber._debugInfo;
+          if (null != type)
+            for (var i = type.length - 1; 0 <= i; i--)
+              if ("string" === typeof type[i].name) return type[i].name;
+          if (null !== fiber.return)
+            return getComponentNameFromFiber(fiber.return);
       }
       return null;
     }
@@ -5623,7 +5631,16 @@
           var fiber = createFiber(29, x, null, returnFiber.mode);
           fiber.lanes = lanes;
           fiber.return = returnFiber;
-          fiber._debugInfo = currentDebugInfo;
+          var debugInfo = (fiber._debugInfo = currentDebugInfo);
+          fiber._debugOwner = returnFiber._debugOwner;
+          fiber._debugTask = returnFiber._debugTask;
+          if (null != debugInfo)
+            for (var i = debugInfo.length - 1; 0 <= i; i--)
+              if ("string" === typeof debugInfo[i].stack) {
+                fiber._debugOwner = debugInfo[i];
+                fiber._debugTask = debugInfo[i].task;
+                break;
+              }
           return fiber;
         } finally {
           currentDebugInfo = prevDebugInfo;
@@ -23791,14 +23808,6 @@
     var didWarnAboutUndefinedDerivedState = new Set();
     var didWarnAboutInvalidateContextType = new Set();
     var didWarnOnInvalidCallback = new Set();
-    Object.defineProperty(fakeInternalInstance, "_processChildContext", {
-      enumerable: !1,
-      value: function () {
-        throw Error(
-          "_processChildContext is not available in React 16+. This likely means you have multiple copies of React and are attempting to nest a React 15 tree inside a React 16 tree using unstable_renderSubtreeIntoContainer, which isn't supported. Try to make sure you have only one copy of React (and ideally, switch to ReactDOM.createPortal)."
-        );
-      }
-    });
     Object.freeze(fakeInternalInstance);
     var classComponentUpdater = {
         isMounted: function (component) {
@@ -24495,11 +24504,11 @@
     };
     (function () {
       var isomorphicReactPackageVersion = React.version;
-      if ("19.0.0-experimental-a26e3f403e-20240611" !== isomorphicReactPackageVersion)
+      if ("19.0.0-experimental-f3e09d6328-20240612" !== isomorphicReactPackageVersion)
         throw Error(
           'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n  - react:      ' +
             (isomorphicReactPackageVersion +
-              "\n  - react-dom:  19.0.0-experimental-a26e3f403e-20240611\nLearn more: https://react.dev/warnings/version-mismatch")
+              "\n  - react-dom:  19.0.0-experimental-f3e09d6328-20240612\nLearn more: https://react.dev/warnings/version-mismatch")
         );
     })();
     ("function" === typeof Map &&
@@ -24554,12 +24563,12 @@
           scheduleRoot: scheduleRoot,
           setRefreshHandler: setRefreshHandler,
           getCurrentFiber: getCurrentFiberForDevTools,
-          reconcilerVersion: "19.0.0-experimental-a26e3f403e-20240611"
+          reconcilerVersion: "19.0.0-experimental-f3e09d6328-20240612"
         });
       })({
         findFiberByHostInstance: getClosestInstanceFromNode,
         bundleType: 1,
-        version: "19.0.0-experimental-a26e3f403e-20240611",
+        version: "19.0.0-experimental-f3e09d6328-20240612",
         rendererPackageName: "react-dom"
       }) &&
       canUseDOM &&
@@ -24689,7 +24698,7 @@
       listenToAllSupportedEvents(container);
       return new ReactDOMHydrationRoot(initialChildren);
     };
-    exports.version = "19.0.0-experimental-a26e3f403e-20240611";
+    exports.version = "19.0.0-experimental-f3e09d6328-20240612";
     "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
       "function" ===
         typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.production.js

@@ -14801,14 +14801,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
 };
 var isomorphicReactPackageVersion$jscomp$inline_1647 = React.version;
 if (
-  "19.0.0-experimental-a26e3f403e-20240611" !==
+  "19.0.0-experimental-f3e09d6328-20240612" !==
   isomorphicReactPackageVersion$jscomp$inline_1647
 )
   throw Error(
     formatProdErrorMessage(
       527,
       isomorphicReactPackageVersion$jscomp$inline_1647,
-      "19.0.0-experimental-a26e3f403e-20240611"
+      "19.0.0-experimental-f3e09d6328-20240612"
     )
   );
 ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -14827,7 +14827,7 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
 var devToolsConfig$jscomp$inline_1654 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-experimental-a26e3f403e-20240611",
+  version: "19.0.0-experimental-f3e09d6328-20240612",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2032 = {
@@ -14857,7 +14857,7 @@ var internals$jscomp$inline_2032 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-experimental-a26e3f403e-20240611"
+  reconcilerVersion: "19.0.0-experimental-f3e09d6328-20240612"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2033 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -14963,4 +14963,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
   listenToAllSupportedEvents(container);
   return new ReactDOMHydrationRoot(initialChildren);
 };
-exports.version = "19.0.0-experimental-a26e3f403e-20240611";
+exports.version = "19.0.0-experimental-f3e09d6328-20240612";

packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.development.js

@@ -291,6 +291,14 @@
           if ("function" === typeof type)
             return type.displayName || type.name || null;
           if ("string" === typeof type) return type;
+          break;
+        case 29:
+          type = fiber._debugInfo;
+          if (null != type)
+            for (var i = type.length - 1; 0 <= i; i--)
+              if ("string" === typeof type[i].name) return type[i].name;
+          if (null !== fiber.return)
+            return getComponentNameFromFiber(fiber.return);
       }
       return null;
     }
@@ -5631,7 +5639,16 @@
           var fiber = createFiber(29, x, null, returnFiber.mode);
           fiber.lanes = lanes;
           fiber.return = returnFiber;
-          fiber._debugInfo = currentDebugInfo;
+          var debugInfo = (fiber._debugInfo = currentDebugInfo);
+          fiber._debugOwner = returnFiber._debugOwner;
+          fiber._debugTask = returnFiber._debugTask;
+          if (null != debugInfo)
+            for (var i = debugInfo.length - 1; 0 <= i; i--)
+              if ("string" === typeof debugInfo[i].stack) {
+                fiber._debugOwner = debugInfo[i];
+                fiber._debugTask = debugInfo[i].task;
+                break;
+              }
           return fiber;
         } finally {
           currentDebugInfo = prevDebugInfo;
@@ -23848,14 +23865,6 @@
     var didWarnAboutUndefinedDerivedState = new Set();
     var didWarnAboutInvalidateContextType = new Set();
     var didWarnOnInvalidCallback = new Set();
-    Object.defineProperty(fakeInternalInstance, "_processChildContext", {
-      enumerable: !1,
-      value: function () {
-        throw Error(
-          "_processChildContext is not available in React 16+. This likely means you have multiple copies of React and are attempting to nest a React 15 tree inside a React 16 tree using unstable_renderSubtreeIntoContainer, which isn't supported. Try to make sure you have only one copy of React (and ideally, switch to ReactDOM.createPortal)."
-        );
-      }
-    });
     Object.freeze(fakeInternalInstance);
     var classComponentUpdater = {
         isMounted: function (component) {
@@ -24552,11 +24561,11 @@
     };
     (function () {
       var isomorphicReactPackageVersion = React.version;
-      if ("19.0.0-experimental-a26e3f403e-20240611" !== isomorphicReactPackageVersion)
+      if ("19.0.0-experimental-f3e09d6328-20240612" !== isomorphicReactPackageVersion)
         throw Error(
           'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n  - react:      ' +
             (isomorphicReactPackageVersion +
-              "\n  - react-dom:  19.0.0-experimental-a26e3f403e-20240611\nLearn more: https://react.dev/warnings/version-mismatch")
+              "\n  - react-dom:  19.0.0-experimental-f3e09d6328-20240612\nLearn more: https://react.dev/warnings/version-mismatch")
         );
     })();
     ("function" === typeof Map &&
@@ -24611,12 +24620,12 @@
           scheduleRoot: scheduleRoot,
           setRefreshHandler: setRefreshHandler,
           getCurrentFiber: getCurrentFiberForDevTools,
-          reconcilerVersion: "19.0.0-experimental-a26e3f403e-20240611"
+          reconcilerVersion: "19.0.0-experimental-f3e09d6328-20240612"
         });
       })({
         findFiberByHostInstance: getClosestInstanceFromNode,
         bundleType: 1,
-        version: "19.0.0-experimental-a26e3f403e-20240611",
+        version: "19.0.0-experimental-f3e09d6328-20240612",
         rendererPackageName: "react-dom"
       }) &&
       canUseDOM &&
@@ -25076,7 +25085,7 @@
     exports.useFormStatus = function () {
       return resolveDispatcher().useHostTransitionStatus();
     };
-    exports.version = "19.0.0-experimental-a26e3f403e-20240611";
+    exports.version = "19.0.0-experimental-f3e09d6328-20240612";
     "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
       "function" ===
         typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&