Throw if React and React DOM versions don't match (#29236)

Throw an error during module initialization if the version of the "react-dom" package does not match the version of "react". We used to be more relaxed about this, because the "react" package changed so infrequently. However, we now have many more features that rely on an internal protocol between the two packages, including Hooks, Float, and the compiler runtime. So it's important that both packages are versioned in lockstep. Before this change, a version mismatch would often result in a cryptic internal error with no indication of the root cause. Instead, we will now compare the versions during module initialization and immediately throw an error to catch mistakes as early as possible and provide a clear error message. DiffTrain build for [681a4aa](681a4aa)
facebook · May 28, 2024 · 913577e · 913577e
1 parent d2a3772
commit 913577e
Show file tree

Hide file tree

Showing 11 changed files with 181 additions and 87 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-ea6e05912aa43a0bbfbee381752caa1817a41a86
+681a4aa81022d4053f990d905d6453c73d2ee644
diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -31050,7 +31050,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
   return root;
 }
 
-var ReactVersion = '19.0.0-www-classic-70e5b810';
+var ReactVersion = '19.0.0-www-classic-5c643ca1';
 
 function createPortal$1(children, containerInfo, // TODO: figure out the API for cross-renderer implementation.
 implementation) {
@@ -41276,6 +41276,14 @@ function createEventHandle(type, options) {
   }
 }
 
+function ensureCorrectIsomorphicReactVersion() {
+  var isomorphicReactPackageVersion = React.version;
+
+  if (isomorphicReactPackageVersion !== ReactVersion) {
+    throw new Error('Incompatible React versions: The "react" and "react-dom" packages must ' + 'have the exact same version. Instead got:\n' + ("  - react:      " + isomorphicReactPackageVersion + "\n") + ("  - react-dom:  " + ReactVersion + "\n") + 'Learn more: https://react.dev/warnings/version-mismatch');
+  }
+}
+
 function getCrossOriginString(input) {
   if (typeof input === 'string') {
     return input === 'use-credentials' ? input : '';
@@ -41545,6 +41553,8 @@ function getValueDescriptorExpectingEnumForWarning(thing) {
   return thing === null ? '`null`' : thing === undefined ? '`undefined`' : thing === '' ? 'an empty string' : typeof thing === 'string' ? JSON.stringify(thing) : typeof thing === 'number' ? '`' + thing + '`' : "something with type \"" + typeof thing + "\"";
 }
 
+ensureCorrectIsomorphicReactVersion();
+
 {
   if (typeof Map !== 'function' || // $FlowFixMe[prop-missing] Flow incorrectly thinks Map has no prototype
   Map.prototype == null || typeof Map.prototype.forEach !== 'function' || typeof Set !== 'function' || // $FlowFixMe[prop-missing] Flow incorrectly thinks Set has no prototype

diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -30227,7 +30227,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
   return root;
 }
 
-var ReactVersion = '19.0.0-www-modern-20c6b73e';
+var ReactVersion = '19.0.0-www-modern-0d2d4bbc';
 
 function createPortal$1(children, containerInfo, // TODO: figure out the API for cross-renderer implementation.
 implementation) {
@@ -40476,6 +40476,14 @@ function flushSyncImpl(fn) {
 
 var flushSync$1 = flushSyncImpl ;
 
+function ensureCorrectIsomorphicReactVersion() {
+  var isomorphicReactPackageVersion = React.version;
+
+  if (isomorphicReactPackageVersion !== ReactVersion) {
+    throw new Error('Incompatible React versions: The "react" and "react-dom" packages must ' + 'have the exact same version. Instead got:\n' + ("  - react:      " + isomorphicReactPackageVersion + "\n") + ("  - react-dom:  " + ReactVersion + "\n") + 'Learn more: https://react.dev/warnings/version-mismatch');
+  }
+}
+
 function getCrossOriginString(input) {
   if (typeof input === 'string') {
     return input === 'use-credentials' ? input : '';
@@ -40745,6 +40753,8 @@ function getValueDescriptorExpectingEnumForWarning(thing) {
   return thing === null ? '`null`' : thing === undefined ? '`undefined`' : thing === '' ? 'an empty string' : typeof thing === 'string' ? JSON.stringify(thing) : typeof thing === 'number' ? '`' + thing + '`' : "something with type \"" + typeof thing + "\"";
 }
 
+ensureCorrectIsomorphicReactVersion();
+
 {
   if (typeof Map !== 'function' || // $FlowFixMe[prop-missing] Flow incorrectly thinks Map has no prototype
   Map.prototype == null || typeof Map.prototype.forEach !== 'function' || typeof Set !== 'function' || // $FlowFixMe[prop-missing] Flow incorrectly thinks Set has no prototype

diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js
@@ -17048,6 +17048,15 @@ function getCrossOriginStringAs(as, input) {
   if ("string" === typeof input)
     return "use-credentials" === input ? input : "";
 }
+var isomorphicReactPackageVersion$jscomp$inline_1753 = React.version;
+if ("19.0.0-www-classic-7a2b4769" !== isomorphicReactPackageVersion$jscomp$inline_1753)
+  throw Error(
+    formatProdErrorMessage(
+      527,
+      isomorphicReactPackageVersion$jscomp$inline_1753,
+      "19.0.0-www-classic-7a2b4769"
+    )
+  );
 Internals.findDOMNode = function (componentOrElement) {
   return findHostInstance(componentOrElement);
 };
@@ -17061,17 +17070,17 @@ Internals.Events = [
     return fn(a);
   }
 ];
-var devToolsConfig$jscomp$inline_1758 = {
+var devToolsConfig$jscomp$inline_1760 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-www-classic-9f6bd68c",
+  version: "19.0.0-www-classic-7a2b4769",
   rendererPackageName: "react-dom"
 };
-var internals$jscomp$inline_2202 = {
-  bundleType: devToolsConfig$jscomp$inline_1758.bundleType,
-  version: devToolsConfig$jscomp$inline_1758.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1758.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1758.rendererConfig,
+var internals$jscomp$inline_2204 = {
+  bundleType: devToolsConfig$jscomp$inline_1760.bundleType,
+  version: devToolsConfig$jscomp$inline_1760.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1760.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1760.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -17087,26 +17096,26 @@ var internals$jscomp$inline_2202 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1758.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1760.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-classic-9f6bd68c"
+  reconcilerVersion: "19.0.0-www-classic-7a2b4769"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_2203 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_2205 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_2203.isDisabled &&
-    hook$jscomp$inline_2203.supportsFiber
+    !hook$jscomp$inline_2205.isDisabled &&
+    hook$jscomp$inline_2205.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_2203.inject(
-        internals$jscomp$inline_2202
+      (rendererID = hook$jscomp$inline_2205.inject(
+        internals$jscomp$inline_2204
       )),
-        (injectedHook = hook$jscomp$inline_2203);
+        (injectedHook = hook$jscomp$inline_2205);
     } catch (err) {}
 }
 function ReactDOMRoot(internalRoot) {
@@ -17598,4 +17607,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.0.0-www-classic-9f6bd68c";
+exports.version = "19.0.0-www-classic-7a2b4769";
diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js
@@ -16411,6 +16411,15 @@ function getCrossOriginStringAs(as, input) {
   if ("string" === typeof input)
     return "use-credentials" === input ? input : "";
 }
+var isomorphicReactPackageVersion$jscomp$inline_1724 = React.version;
+if ("19.0.0-www-modern-078377b8" !== isomorphicReactPackageVersion$jscomp$inline_1724)
+  throw Error(
+    formatProdErrorMessage(
+      527,
+      isomorphicReactPackageVersion$jscomp$inline_1724,
+      "19.0.0-www-modern-078377b8"
+    )
+  );
 Internals.findDOMNode = function (componentOrElement) {
   return findHostInstance(componentOrElement);
 };
@@ -16424,17 +16433,17 @@ Internals.Events = [
     return fn(a);
   }
 ];
-var devToolsConfig$jscomp$inline_1724 = {
+var devToolsConfig$jscomp$inline_1726 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-www-modern-8100be65",
+  version: "19.0.0-www-modern-078377b8",
   rendererPackageName: "react-dom"
 };
-var internals$jscomp$inline_2193 = {
-  bundleType: devToolsConfig$jscomp$inline_1724.bundleType,
-  version: devToolsConfig$jscomp$inline_1724.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1724.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1724.rendererConfig,
+var internals$jscomp$inline_2195 = {
+  bundleType: devToolsConfig$jscomp$inline_1726.bundleType,
+  version: devToolsConfig$jscomp$inline_1726.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1726.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1726.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -16450,26 +16459,26 @@ var internals$jscomp$inline_2193 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1724.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1726.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-modern-8100be65"
+  reconcilerVersion: "19.0.0-www-modern-078377b8"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_2194 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_2196 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_2194.isDisabled &&
-    hook$jscomp$inline_2194.supportsFiber
+    !hook$jscomp$inline_2196.isDisabled &&
+    hook$jscomp$inline_2196.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_2194.inject(
-        internals$jscomp$inline_2193
+      (rendererID = hook$jscomp$inline_2196.inject(
+        internals$jscomp$inline_2195
       )),
-        (injectedHook = hook$jscomp$inline_2194);
+        (injectedHook = hook$jscomp$inline_2196);
     } catch (err) {}
 }
 function ReactDOMRoot(internalRoot) {
@@ -16831,4 +16840,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.0.0-www-modern-8100be65";
+exports.version = "19.0.0-www-modern-078377b8";
diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js
@@ -17817,6 +17817,15 @@ function getCrossOriginStringAs(as, input) {
   if ("string" === typeof input)
     return "use-credentials" === input ? input : "";
 }
+var isomorphicReactPackageVersion$jscomp$inline_1840 = React.version;
+if ("19.0.0-www-classic-0cc44ba3" !== isomorphicReactPackageVersion$jscomp$inline_1840)
+  throw Error(
+    formatProdErrorMessage(
+      527,
+      isomorphicReactPackageVersion$jscomp$inline_1840,
+      "19.0.0-www-classic-0cc44ba3"
+    )
+  );
 Internals.findDOMNode = function (componentOrElement) {
   return findHostInstance(componentOrElement);
 };
@@ -17830,10 +17839,10 @@ Internals.Events = [
     return fn(a);
   }
 ];
-var devToolsConfig$jscomp$inline_1845 = {
+var devToolsConfig$jscomp$inline_1847 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-www-classic-8cd678b4",
+  version: "19.0.0-www-classic-0cc44ba3",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -17851,10 +17860,10 @@ var devToolsConfig$jscomp$inline_1845 = {
   } catch (err) {}
   return hook.checkDCE ? !0 : !1;
 })({
-  bundleType: devToolsConfig$jscomp$inline_1845.bundleType,
-  version: devToolsConfig$jscomp$inline_1845.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1845.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1845.rendererConfig,
+  bundleType: devToolsConfig$jscomp$inline_1847.bundleType,
+  version: devToolsConfig$jscomp$inline_1847.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1847.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1847.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -17870,14 +17879,14 @@ var devToolsConfig$jscomp$inline_1845 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1845.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1847.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-classic-8cd678b4"
+  reconcilerVersion: "19.0.0-www-classic-0cc44ba3"
 });
 function ReactDOMRoot(internalRoot) {
   this._internalRoot = internalRoot;
@@ -18368,7 +18377,7 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.0.0-www-classic-8cd678b4";
+exports.version = "19.0.0-www-classic-0cc44ba3";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js
@@ -17163,6 +17163,15 @@ function getCrossOriginStringAs(as, input) {
   if ("string" === typeof input)
     return "use-credentials" === input ? input : "";
 }
+var isomorphicReactPackageVersion$jscomp$inline_1811 = React.version;
+if ("19.0.0-www-modern-c4feff63" !== isomorphicReactPackageVersion$jscomp$inline_1811)
+  throw Error(
+    formatProdErrorMessage(
+      527,
+      isomorphicReactPackageVersion$jscomp$inline_1811,
+      "19.0.0-www-modern-c4feff63"
+    )
+  );
 Internals.findDOMNode = function (componentOrElement) {
   return findHostInstance(componentOrElement);
 };
@@ -17176,10 +17185,10 @@ Internals.Events = [
     return fn(a);
   }
 ];
-var devToolsConfig$jscomp$inline_1811 = {
+var devToolsConfig$jscomp$inline_1813 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-www-modern-d69be7d1",
+  version: "19.0.0-www-modern-c4feff63",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -17197,10 +17206,10 @@ var devToolsConfig$jscomp$inline_1811 = {
   } catch (err) {}
   return hook.checkDCE ? !0 : !1;
 })({
-  bundleType: devToolsConfig$jscomp$inline_1811.bundleType,
-  version: devToolsConfig$jscomp$inline_1811.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1811.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1811.rendererConfig,
+  bundleType: devToolsConfig$jscomp$inline_1813.bundleType,
+  version: devToolsConfig$jscomp$inline_1813.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1813.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1813.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -17216,14 +17225,14 @@ var devToolsConfig$jscomp$inline_1811 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1811.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1813.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-modern-d69be7d1"
+  reconcilerVersion: "19.0.0-www-modern-c4feff63"
 });
 function ReactDOMRoot(internalRoot) {
   this._internalRoot = internalRoot;
@@ -17584,7 +17593,7 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.0.0-www-modern-d69be7d1";
+exports.version = "19.0.0-www-modern-c4feff63";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		ea6e05912aa43a0bbfbee381752caa1817a41a86
		681a4aa81022d4053f990d905d6453c73d2ee644