Include the function name for context on invalid function child (#28362)

Also warn for symbols. It's weird because for objects we throw a hard error but functions we do a dev only check. Mainly because we have an object branch anyway. In the object branch we have some built-ins that have bad errors like forwardRef and memo but since they're going to become functions later, I didn't bother updating those. Once they're functions those names will be part of this. DiffTrain build for commit c1fd2a9.
facebook · Feb 17, 2024 · 9452c20 · 9452c20
1 parent c2e732f
commit 9452c20
Show file tree

Hide file tree

Showing 9 changed files with 248 additions and 56 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<<2bd76364e49975f7447df4d717144b25>>
+ * @generated SignedSource<<825f43f1ef38b03ee1f23d7689105b33>>
  */
 
 "use strict";
@@ -4972,6 +4972,7 @@ if (__DEV__) {
     var didWarnAboutStringRefs;
     var ownerHasKeyUseWarning;
     var ownerHasFunctionTypeWarning;
+    var ownerHasSymbolTypeWarning;
 
     var warnForMissingKey = function (child, returnFiber) {};
 
@@ -4987,6 +4988,7 @@ if (__DEV__) {
 
       ownerHasKeyUseWarning = {};
       ownerHasFunctionTypeWarning = {};
+      ownerHasSymbolTypeWarning = {};
 
       warnForMissingKey = function (child, returnFiber) {
         if (child === null || typeof child !== "object") {
@@ -5169,22 +5171,68 @@ if (__DEV__) {
       );
     }
 
-    function warnOnFunctionType(returnFiber) {
+    function warnOnFunctionType(returnFiber, invalidChild) {
       {
-        var componentName =
-          getComponentNameFromFiber(returnFiber) || "Component";
+        var parentName = getComponentNameFromFiber(returnFiber) || "Component";
 
-        if (ownerHasFunctionTypeWarning[componentName]) {
+        if (ownerHasFunctionTypeWarning[parentName]) {
           return;
         }
 
-        ownerHasFunctionTypeWarning[componentName] = true;
+        ownerHasFunctionTypeWarning[parentName] = true;
+        var name = invalidChild.displayName || invalidChild.name || "Component";
 
-        error(
-          "Functions are not valid as a React child. This may happen if " +
-            "you return a Component instead of <Component /> from render. " +
-            "Or maybe you meant to call this function rather than return it."
-        );
+        if (returnFiber.tag === HostRoot) {
+          error(
+            "Functions are not valid as a React child. This may happen if " +
+              "you return %s instead of <%s /> from render. " +
+              "Or maybe you meant to call this function rather than return it.\n" +
+              "  root.render(%s)",
+            name,
+            name,
+            name
+          );
+        } else {
+          error(
+            "Functions are not valid as a React child. This may happen if " +
+              "you return %s instead of <%s /> from render. " +
+              "Or maybe you meant to call this function rather than return it.\n" +
+              "  <%s>{%s}</%s>",
+            name,
+            name,
+            parentName,
+            name,
+            parentName
+          );
+        }
+      }
+    }
+
+    function warnOnSymbolType(returnFiber, invalidChild) {
+      {
+        var parentName = getComponentNameFromFiber(returnFiber) || "Component";
+
+        if (ownerHasSymbolTypeWarning[parentName]) {
+          return;
+        }
+
+        ownerHasSymbolTypeWarning[parentName] = true; // eslint-disable-next-line react-internal/safe-string-coercion
+
+        var name = String(invalidChild);
+
+        if (returnFiber.tag === HostRoot) {
+          error(
+            "Symbols are not valid as a React child.\n" + "  root.render(%s)",
+            name
+          );
+        } else {
+          error(
+            "Symbols are not valid as a React child.\n" + "  <%s>%s</%s>",
+            parentName,
+            name,
+            parentName
+          );
+        }
       }
     }
 
@@ -5569,7 +5617,11 @@ if (__DEV__) {
 
         {
           if (typeof newChild === "function") {
-            warnOnFunctionType(returnFiber);
+            warnOnFunctionType(returnFiber, newChild);
+          }
+
+          if (typeof newChild === "symbol") {
+            warnOnSymbolType(returnFiber, newChild);
           }
         }
 
@@ -5687,7 +5739,11 @@ if (__DEV__) {
 
         {
           if (typeof newChild === "function") {
-            warnOnFunctionType(returnFiber);
+            warnOnFunctionType(returnFiber, newChild);
+          }
+
+          if (typeof newChild === "symbol") {
+            warnOnSymbolType(returnFiber, newChild);
           }
         }
 
@@ -5807,7 +5863,11 @@ if (__DEV__) {
 
         {
           if (typeof newChild === "function") {
-            warnOnFunctionType(returnFiber);
+            warnOnFunctionType(returnFiber, newChild);
+          }
+
+          if (typeof newChild === "symbol") {
+            warnOnSymbolType(returnFiber, newChild);
           }
         }
 
@@ -6562,7 +6622,11 @@ if (__DEV__) {
 
         {
           if (typeof newChild === "function") {
-            warnOnFunctionType(returnFiber);
+            warnOnFunctionType(returnFiber, newChild);
+          }
+
+          if (typeof newChild === "symbol") {
+            warnOnSymbolType(returnFiber, newChild);
           }
         } // Remaining cases are all treated as empty.
 
@@ -25633,7 +25697,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "18.3.0-canary-fef30c2e0-20240217";
+    var ReactVersion = "18.3.0-canary-c1fd2a91b-20240217";
 
     // 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
@@ -9179,7 +9179,7 @@ var devToolsConfig$jscomp$inline_1018 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "18.3.0-canary-fef30c2e0-20240217",
+  version: "18.3.0-canary-c1fd2a91b-20240217",
   rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1199 = {
@@ -9210,7 +9210,7 @@ var internals$jscomp$inline_1199 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-fef30c2e0-20240217"
+  reconcilerVersion: "18.3.0-canary-c1fd2a91b-20240217"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1200 = __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
@@ -9607,7 +9607,7 @@ var devToolsConfig$jscomp$inline_1060 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "18.3.0-canary-fef30c2e0-20240217",
+  version: "18.3.0-canary-c1fd2a91b-20240217",
   rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1240 = {
@@ -9638,7 +9638,7 @@ var internals$jscomp$inline_1240 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-fef30c2e0-20240217"
+  reconcilerVersion: "18.3.0-canary-c1fd2a91b-20240217"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1241 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js
@@ -24,7 +24,7 @@ if (__DEV__) {
     ) {
       __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
     }
-    var ReactVersion = "18.3.0-canary-fef30c2e0-20240217";
+    var ReactVersion = "18.3.0-canary-c1fd2a91b-20240217";
 
     // ATTENTION
     // When adding new symbols to this file,

diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js
@@ -590,4 +590,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-canary-fef30c2e0-20240217";
+exports.version = "18.3.0-canary-c1fd2a91b-20240217";
diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js
@@ -586,7 +586,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-canary-fef30c2e0-20240217";
+exports.version = "18.3.0-canary-c1fd2a91b-20240217";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION
@@ -1 +1 @@
-fef30c2e0403e0c6986904be89fcd01e665866ee
+c1fd2a91b1042c137d750be85e5998f699a54d2a
diff --git a/...rce/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js b/...rce/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<eafe6f8c93c68ef414c9c5d3e0c8f7dd>>
+ * @generated SignedSource<<f0e56e2fe67e9208d392fd3e30b44313>>
  */
 
 "use strict";
@@ -8611,6 +8611,7 @@ to return true:wantsResponderID|                            |
     var didWarnAboutStringRefs;
     var ownerHasKeyUseWarning;
     var ownerHasFunctionTypeWarning;
+    var ownerHasSymbolTypeWarning;
 
     var warnForMissingKey = function (child, returnFiber) {};
 
@@ -8626,6 +8627,7 @@ to return true:wantsResponderID|                            |
 
       ownerHasKeyUseWarning = {};
       ownerHasFunctionTypeWarning = {};
+      ownerHasSymbolTypeWarning = {};
 
       warnForMissingKey = function (child, returnFiber) {
         if (child === null || typeof child !== "object") {
@@ -8808,22 +8810,68 @@ to return true:wantsResponderID|                            |
       );
     }
 
-    function warnOnFunctionType(returnFiber) {
+    function warnOnFunctionType(returnFiber, invalidChild) {
       {
-        var componentName =
-          getComponentNameFromFiber(returnFiber) || "Component";
+        var parentName = getComponentNameFromFiber(returnFiber) || "Component";
 
-        if (ownerHasFunctionTypeWarning[componentName]) {
+        if (ownerHasFunctionTypeWarning[parentName]) {
           return;
         }
 
-        ownerHasFunctionTypeWarning[componentName] = true;
+        ownerHasFunctionTypeWarning[parentName] = true;
+        var name = invalidChild.displayName || invalidChild.name || "Component";
 
-        error(
-          "Functions are not valid as a React child. This may happen if " +
-            "you return a Component instead of <Component /> from render. " +
-            "Or maybe you meant to call this function rather than return it."
-        );
+        if (returnFiber.tag === HostRoot) {
+          error(
+            "Functions are not valid as a React child. This may happen if " +
+              "you return %s instead of <%s /> from render. " +
+              "Or maybe you meant to call this function rather than return it.\n" +
+              "  root.render(%s)",
+            name,
+            name,
+            name
+          );
+        } else {
+          error(
+            "Functions are not valid as a React child. This may happen if " +
+              "you return %s instead of <%s /> from render. " +
+              "Or maybe you meant to call this function rather than return it.\n" +
+              "  <%s>{%s}</%s>",
+            name,
+            name,
+            parentName,
+            name,
+            parentName
+          );
+        }
+      }
+    }
+
+    function warnOnSymbolType(returnFiber, invalidChild) {
+      {
+        var parentName = getComponentNameFromFiber(returnFiber) || "Component";
+
+        if (ownerHasSymbolTypeWarning[parentName]) {
+          return;
+        }
+
+        ownerHasSymbolTypeWarning[parentName] = true; // eslint-disable-next-line react-internal/safe-string-coercion
+
+        var name = String(invalidChild);
+
+        if (returnFiber.tag === HostRoot) {
+          error(
+            "Symbols are not valid as a React child.\n" + "  root.render(%s)",
+            name
+          );
+        } else {
+          error(
+            "Symbols are not valid as a React child.\n" + "  <%s>%s</%s>",
+            parentName,
+            name,
+            parentName
+          );
+        }
       }
     }
 
@@ -9208,7 +9256,11 @@ to return true:wantsResponderID|                            |
 
         {
           if (typeof newChild === "function") {
-            warnOnFunctionType(returnFiber);
+            warnOnFunctionType(returnFiber, newChild);
+          }
+
+          if (typeof newChild === "symbol") {
+            warnOnSymbolType(returnFiber, newChild);
           }
         }
 
@@ -9326,7 +9378,11 @@ to return true:wantsResponderID|                            |
 
         {
           if (typeof newChild === "function") {
-            warnOnFunctionType(returnFiber);
+            warnOnFunctionType(returnFiber, newChild);
+          }
+
+          if (typeof newChild === "symbol") {
+            warnOnSymbolType(returnFiber, newChild);
           }
         }
 
@@ -9446,7 +9502,11 @@ to return true:wantsResponderID|                            |
 
         {
           if (typeof newChild === "function") {
-            warnOnFunctionType(returnFiber);
+            warnOnFunctionType(returnFiber, newChild);
+          }
+
+          if (typeof newChild === "symbol") {
+            warnOnSymbolType(returnFiber, newChild);
           }
         }
 
@@ -10201,7 +10261,11 @@ to return true:wantsResponderID|                            |
 
         {
           if (typeof newChild === "function") {
-            warnOnFunctionType(returnFiber);
+            warnOnFunctionType(returnFiber, newChild);
+          }
+
+          if (typeof newChild === "symbol") {
+            warnOnSymbolType(returnFiber, newChild);
           }
         } // Remaining cases are all treated as empty.
 
@@ -27672,7 +27736,7 @@ to return true:wantsResponderID|                            |
       return root;
     }
 
-    var ReactVersion = "18.3.0-canary-f6a619c0";
+    var ReactVersion = "18.3.0-canary-d5b088bd";
 
     function createPortal$1(
       children,