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,