Use getComponentNameFromType for debug info for the key warning (#27930)

If this is a client reference we shouldn't dot into it, which would throw in the proxy. Interestingly our client references don't really have a `name` associated with them for debug information so a component type doesn't show up in error logs even though it seems like it should. DiffTrain build for commit 0ac3ea4.
facebook · Jan 11, 2024 · caf4532 · caf4532
1 parent 2a6d5ac
commit caf4532
Show file tree

Hide file tree

Showing 15 changed files with 165 additions and 111 deletions.
diff --git a/...ook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js b/...ook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<b85e6b4f686f35ddcd77f85e17cfc9f9>>
+ * @generated SignedSource<<fc408c74cd117076cbc05c2d9747b81d>>
  */
 
 "use strict";
@@ -238,24 +238,22 @@ if (__DEV__) {
 
     function getContextName$1(type) {
       return type.displayName || "Context";
-    } // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
+    }
+
+    var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
 
     function getComponentNameFromType(type) {
       if (type == null) {
         // Host root, text node or just invalid type.
         return null;
       }
 
-      {
-        if (typeof type.tag === "number") {
-          error(
-            "Received an unexpected object in getComponentNameFromType(). " +
-              "This is likely a bug in React. Please file an issue."
-          );
+      if (typeof type === "function") {
+        if (type.$$typeof === REACT_CLIENT_REFERENCE) {
+          // TODO: Create a convention for naming client references with debug info.
+          return null;
         }
-      }
 
-      if (typeof type === "function") {
         return type.displayName || type.name || null;
       }
 
@@ -288,6 +286,15 @@ if (__DEV__) {
       }
 
       if (typeof type === "object") {
+        {
+          if (typeof type.tag === "number") {
+            error(
+              "Received an unexpected object in getComponentNameFromType(). " +
+                "This is likely a bug in React. Please file an issue."
+            );
+          }
+        }
+
         switch (type.$$typeof) {
           case REACT_CONTEXT_TYPE:
             var context = type;
@@ -25524,7 +25531,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "18.3.0-canary-6639ed3b3-20240111";
+    var ReactVersion = "18.3.0-canary-0ac3ea471-20240111";
 
     // Might add PROFILE later.
 

diff --git a/...ok-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js b/...ok-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<98d1b8b04c6fa3a6d1a3f5d4d992bfdb>>
+ * @generated SignedSource<<09dbf4f778ca917e96108791bdd4cd8e>>
  */
 
 "use strict";
@@ -59,9 +59,13 @@ function getIteratorFn(maybeIterable) {
     maybeIterable["@@iterator"];
   return "function" === typeof maybeIterable ? maybeIterable : null;
 }
+var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
 function getComponentNameFromType(type) {
   if (null == type) return null;
-  if ("function" === typeof type) return type.displayName || type.name || null;
+  if ("function" === typeof type)
+    return type.$$typeof === REACT_CLIENT_REFERENCE
+      ? null
+      : type.displayName || type.name || null;
   if ("string" === typeof type) return type;
   switch (type) {
     case REACT_FRAGMENT_TYPE:
@@ -9117,7 +9121,7 @@ var devToolsConfig$jscomp$inline_1037 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "18.3.0-canary-6639ed3b3-20240111",
+  version: "18.3.0-canary-0ac3ea471-20240111",
   rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1230 = {
@@ -9148,7 +9152,7 @@ var internals$jscomp$inline_1230 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-6639ed3b3-20240111"
+  reconcilerVersion: "18.3.0-canary-0ac3ea471-20240111"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1231 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/...source/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js b/...source/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<c3bf0acffb0597ee7ab235b17135524e>>
+ * @generated SignedSource<<7b9b447b7ed58bc7f344d3fd301db92f>>
  */
 
 "use strict";
@@ -59,9 +59,13 @@ function getIteratorFn(maybeIterable) {
     maybeIterable["@@iterator"];
   return "function" === typeof maybeIterable ? maybeIterable : null;
 }
+var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
 function getComponentNameFromType(type) {
   if (null == type) return null;
-  if ("function" === typeof type) return type.displayName || type.name || null;
+  if ("function" === typeof type)
+    return type.$$typeof === REACT_CLIENT_REFERENCE
+      ? null
+      : type.displayName || type.name || null;
   if ("string" === typeof type) return type;
   switch (type) {
     case REACT_FRAGMENT_TYPE:
@@ -9545,7 +9549,7 @@ var devToolsConfig$jscomp$inline_1079 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "18.3.0-canary-6639ed3b3-20240111",
+  version: "18.3.0-canary-0ac3ea471-20240111",
   rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1271 = {
@@ -9576,7 +9580,7 @@ var internals$jscomp$inline_1271 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-6639ed3b3-20240111"
+  reconcilerVersion: "18.3.0-canary-0ac3ea471-20240111"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1272 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/JSXDEVRuntime-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/JSXDEVRuntime-dev.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<8170be8fec46751a1d737fb773d9ff2c>>
+ * @generated SignedSource<<3b95e8aa7ce2e31fd615f920b4402e91>>
  */
 
 "use strict";
@@ -106,7 +106,7 @@ if (__DEV__) {
     var enableScopeAPI = false;
     var enableTransitionTracing = false;
 
-    var REACT_CLIENT_REFERENCE$1 = Symbol.for("react.client.reference");
+    var REACT_CLIENT_REFERENCE$2 = Symbol.for("react.client.reference");
     function isValidElementType(type) {
       if (typeof type === "string" || typeof type === "function") {
         return true;
@@ -138,7 +138,7 @@ if (__DEV__) {
           // types supported by any Flight configuration anywhere since
           // we don't know which Flight build this will end up being used
           // with.
-          type.$$typeof === REACT_CLIENT_REFERENCE$1 ||
+          type.$$typeof === REACT_CLIENT_REFERENCE$2 ||
           type.getModuleId !== undefined
         ) {
           return true;
@@ -163,24 +163,22 @@ if (__DEV__) {
 
     function getContextName(type) {
       return type.displayName || "Context";
-    } // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
+    }
+
+    var REACT_CLIENT_REFERENCE$1 = Symbol.for("react.client.reference"); // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
 
     function getComponentNameFromType(type) {
       if (type == null) {
         // Host root, text node or just invalid type.
         return null;
       }
 
-      {
-        if (typeof type.tag === "number") {
-          error(
-            "Received an unexpected object in getComponentNameFromType(). " +
-              "This is likely a bug in React. Please file an issue."
-          );
+      if (typeof type === "function") {
+        if (type.$$typeof === REACT_CLIENT_REFERENCE$1) {
+          // TODO: Create a convention for naming client references with debug info.
+          return null;
         }
-      }
 
-      if (typeof type === "function") {
         return type.displayName || type.name || null;
       }
 
@@ -209,6 +207,15 @@ if (__DEV__) {
       }
 
       if (typeof type === "object") {
+        {
+          if (typeof type.tag === "number") {
+            error(
+              "Received an unexpected object in getComponentNameFromType(). " +
+                "This is likely a bug in React. Please file an issue."
+            );
+          }
+        }
+
         switch (type.$$typeof) {
           case REACT_CONTEXT_TYPE:
             var context = type;
@@ -917,10 +924,7 @@ if (__DEV__) {
         var info = getDeclarationErrorAddendum();
 
         if (!info) {
-          var parentName =
-            typeof parentType === "string"
-              ? parentType
-              : parentType.displayName || parentType.name;
+          var parentName = getComponentNameFromType(parentType);
 
           if (parentName) {
             info =

diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/JSXRuntime-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/JSXRuntime-dev.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<147cb9c49da614e98a9929adc67f6800>>
+ * @generated SignedSource<<8fbe3bc0848b0909865f9804f5adcef7>>
  */
 
 "use strict";
@@ -106,7 +106,7 @@ if (__DEV__) {
     var enableScopeAPI = false;
     var enableTransitionTracing = false;
 
-    var REACT_CLIENT_REFERENCE$1 = Symbol.for("react.client.reference");
+    var REACT_CLIENT_REFERENCE$2 = Symbol.for("react.client.reference");
     function isValidElementType(type) {
       if (typeof type === "string" || typeof type === "function") {
         return true;
@@ -138,7 +138,7 @@ if (__DEV__) {
           // types supported by any Flight configuration anywhere since
           // we don't know which Flight build this will end up being used
           // with.
-          type.$$typeof === REACT_CLIENT_REFERENCE$1 ||
+          type.$$typeof === REACT_CLIENT_REFERENCE$2 ||
           type.getModuleId !== undefined
         ) {
           return true;
@@ -163,24 +163,22 @@ if (__DEV__) {
 
     function getContextName(type) {
       return type.displayName || "Context";
-    } // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
+    }
+
+    var REACT_CLIENT_REFERENCE$1 = Symbol.for("react.client.reference"); // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
 
     function getComponentNameFromType(type) {
       if (type == null) {
         // Host root, text node or just invalid type.
         return null;
       }
 
-      {
-        if (typeof type.tag === "number") {
-          error(
-            "Received an unexpected object in getComponentNameFromType(). " +
-              "This is likely a bug in React. Please file an issue."
-          );
+      if (typeof type === "function") {
+        if (type.$$typeof === REACT_CLIENT_REFERENCE$1) {
+          // TODO: Create a convention for naming client references with debug info.
+          return null;
         }
-      }
 
-      if (typeof type === "function") {
         return type.displayName || type.name || null;
       }
 
@@ -209,6 +207,15 @@ if (__DEV__) {
       }
 
       if (typeof type === "object") {
+        {
+          if (typeof type.tag === "number") {
+            error(
+              "Received an unexpected object in getComponentNameFromType(). " +
+                "This is likely a bug in React. Please file an issue."
+            );
+          }
+        }
+
         switch (type.$$typeof) {
           case REACT_CONTEXT_TYPE:
             var context = type;
@@ -917,10 +924,7 @@ if (__DEV__) {
         var info = getDeclarationErrorAddendum();
 
         if (!info) {
-          var parentName =
-            typeof parentType === "string"
-              ? parentType
-              : parentType.displayName || parentType.name;
+          var parentName = getComponentNameFromType(parentType);
 
           if (parentName) {
             info =