Skip to content

Commit 9452c20

Browse files
sebmarkbagesebmarkbage
committed
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.
1 parent c2e732f commit 9452c20

File tree

9 files changed

+248
-56
lines changed

9 files changed

+248
-56
lines changed

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js

+80-16
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<2bd76364e49975f7447df4d717144b25>>
10+
* @generated SignedSource<<825f43f1ef38b03ee1f23d7689105b33>>
1111
*/
1212

1313
"use strict";
@@ -4972,6 +4972,7 @@ if (__DEV__) {
49724972
var didWarnAboutStringRefs;
49734973
var ownerHasKeyUseWarning;
49744974
var ownerHasFunctionTypeWarning;
4975+
var ownerHasSymbolTypeWarning;
49754976

49764977
var warnForMissingKey = function (child, returnFiber) {};
49774978

@@ -4987,6 +4988,7 @@ if (__DEV__) {
49874988

49884989
ownerHasKeyUseWarning = {};
49894990
ownerHasFunctionTypeWarning = {};
4991+
ownerHasSymbolTypeWarning = {};
49904992

49914993
warnForMissingKey = function (child, returnFiber) {
49924994
if (child === null || typeof child !== "object") {
@@ -5169,22 +5171,68 @@ if (__DEV__) {
51695171
);
51705172
}
51715173

5172-
function warnOnFunctionType(returnFiber) {
5174+
function warnOnFunctionType(returnFiber, invalidChild) {
51735175
{
5174-
var componentName =
5175-
getComponentNameFromFiber(returnFiber) || "Component";
5176+
var parentName = getComponentNameFromFiber(returnFiber) || "Component";
51765177

5177-
if (ownerHasFunctionTypeWarning[componentName]) {
5178+
if (ownerHasFunctionTypeWarning[parentName]) {
51785179
return;
51795180
}
51805181

5181-
ownerHasFunctionTypeWarning[componentName] = true;
5182+
ownerHasFunctionTypeWarning[parentName] = true;
5183+
var name = invalidChild.displayName || invalidChild.name || "Component";
51825184

5183-
error(
5184-
"Functions are not valid as a React child. This may happen if " +
5185-
"you return a Component instead of <Component /> from render. " +
5186-
"Or maybe you meant to call this function rather than return it."
5187-
);
5185+
if (returnFiber.tag === HostRoot) {
5186+
error(
5187+
"Functions are not valid as a React child. This may happen if " +
5188+
"you return %s instead of <%s /> from render. " +
5189+
"Or maybe you meant to call this function rather than return it.\n" +
5190+
" root.render(%s)",
5191+
name,
5192+
name,
5193+
name
5194+
);
5195+
} else {
5196+
error(
5197+
"Functions are not valid as a React child. This may happen if " +
5198+
"you return %s instead of <%s /> from render. " +
5199+
"Or maybe you meant to call this function rather than return it.\n" +
5200+
" <%s>{%s}</%s>",
5201+
name,
5202+
name,
5203+
parentName,
5204+
name,
5205+
parentName
5206+
);
5207+
}
5208+
}
5209+
}
5210+
5211+
function warnOnSymbolType(returnFiber, invalidChild) {
5212+
{
5213+
var parentName = getComponentNameFromFiber(returnFiber) || "Component";
5214+
5215+
if (ownerHasSymbolTypeWarning[parentName]) {
5216+
return;
5217+
}
5218+
5219+
ownerHasSymbolTypeWarning[parentName] = true; // eslint-disable-next-line react-internal/safe-string-coercion
5220+
5221+
var name = String(invalidChild);
5222+
5223+
if (returnFiber.tag === HostRoot) {
5224+
error(
5225+
"Symbols are not valid as a React child.\n" + " root.render(%s)",
5226+
name
5227+
);
5228+
} else {
5229+
error(
5230+
"Symbols are not valid as a React child.\n" + " <%s>%s</%s>",
5231+
parentName,
5232+
name,
5233+
parentName
5234+
);
5235+
}
51885236
}
51895237
}
51905238

@@ -5569,7 +5617,11 @@ if (__DEV__) {
55695617

55705618
{
55715619
if (typeof newChild === "function") {
5572-
warnOnFunctionType(returnFiber);
5620+
warnOnFunctionType(returnFiber, newChild);
5621+
}
5622+
5623+
if (typeof newChild === "symbol") {
5624+
warnOnSymbolType(returnFiber, newChild);
55735625
}
55745626
}
55755627

@@ -5687,7 +5739,11 @@ if (__DEV__) {
56875739

56885740
{
56895741
if (typeof newChild === "function") {
5690-
warnOnFunctionType(returnFiber);
5742+
warnOnFunctionType(returnFiber, newChild);
5743+
}
5744+
5745+
if (typeof newChild === "symbol") {
5746+
warnOnSymbolType(returnFiber, newChild);
56915747
}
56925748
}
56935749

@@ -5807,7 +5863,11 @@ if (__DEV__) {
58075863

58085864
{
58095865
if (typeof newChild === "function") {
5810-
warnOnFunctionType(returnFiber);
5866+
warnOnFunctionType(returnFiber, newChild);
5867+
}
5868+
5869+
if (typeof newChild === "symbol") {
5870+
warnOnSymbolType(returnFiber, newChild);
58115871
}
58125872
}
58135873

@@ -6562,7 +6622,11 @@ if (__DEV__) {
65626622

65636623
{
65646624
if (typeof newChild === "function") {
6565-
warnOnFunctionType(returnFiber);
6625+
warnOnFunctionType(returnFiber, newChild);
6626+
}
6627+
6628+
if (typeof newChild === "symbol") {
6629+
warnOnSymbolType(returnFiber, newChild);
65666630
}
65676631
} // Remaining cases are all treated as empty.
65686632

@@ -25633,7 +25697,7 @@ if (__DEV__) {
2563325697
return root;
2563425698
}
2563525699

25636-
var ReactVersion = "18.3.0-canary-fef30c2e0-20240217";
25700+
var ReactVersion = "18.3.0-canary-c1fd2a91b-20240217";
2563725701

2563825702
// Might add PROFILE later.
2563925703

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -9179,7 +9179,7 @@ var devToolsConfig$jscomp$inline_1018 = {
91799179
throw Error("TestRenderer does not support findFiberByHostInstance()");
91809180
},
91819181
bundleType: 0,
9182-
version: "18.3.0-canary-fef30c2e0-20240217",
9182+
version: "18.3.0-canary-c1fd2a91b-20240217",
91839183
rendererPackageName: "react-test-renderer"
91849184
};
91859185
var internals$jscomp$inline_1199 = {
@@ -9210,7 +9210,7 @@ var internals$jscomp$inline_1199 = {
92109210
scheduleRoot: null,
92119211
setRefreshHandler: null,
92129212
getCurrentFiber: null,
9213-
reconcilerVersion: "18.3.0-canary-fef30c2e0-20240217"
9213+
reconcilerVersion: "18.3.0-canary-c1fd2a91b-20240217"
92149214
};
92159215
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
92169216
var hook$jscomp$inline_1200 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -9607,7 +9607,7 @@ var devToolsConfig$jscomp$inline_1060 = {
96079607
throw Error("TestRenderer does not support findFiberByHostInstance()");
96089608
},
96099609
bundleType: 0,
9610-
version: "18.3.0-canary-fef30c2e0-20240217",
9610+
version: "18.3.0-canary-c1fd2a91b-20240217",
96119611
rendererPackageName: "react-test-renderer"
96129612
};
96139613
var internals$jscomp$inline_1240 = {
@@ -9638,7 +9638,7 @@ var internals$jscomp$inline_1240 = {
96389638
scheduleRoot: null,
96399639
setRefreshHandler: null,
96409640
getCurrentFiber: null,
9641-
reconcilerVersion: "18.3.0-canary-fef30c2e0-20240217"
9641+
reconcilerVersion: "18.3.0-canary-c1fd2a91b-20240217"
96429642
};
96439643
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
96449644
var hook$jscomp$inline_1241 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ if (__DEV__) {
2424
) {
2525
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
2626
}
27-
var ReactVersion = "18.3.0-canary-fef30c2e0-20240217";
27+
var ReactVersion = "18.3.0-canary-c1fd2a91b-20240217";
2828

2929
// ATTENTION
3030
// When adding new symbols to this file,

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -590,4 +590,4 @@ exports.useSyncExternalStore = function (
590590
exports.useTransition = function () {
591591
return ReactCurrentDispatcher.current.useTransition();
592592
};
593-
exports.version = "18.3.0-canary-fef30c2e0-20240217";
593+
exports.version = "18.3.0-canary-c1fd2a91b-20240217";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -586,7 +586,7 @@ exports.useSyncExternalStore = function (
586586
exports.useTransition = function () {
587587
return ReactCurrentDispatcher.current.useTransition();
588588
};
589-
exports.version = "18.3.0-canary-fef30c2e0-20240217";
589+
exports.version = "18.3.0-canary-c1fd2a91b-20240217";
590590
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
591591
"function" ===
592592
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
fef30c2e0403e0c6986904be89fcd01e665866ee
1+
c1fd2a91b1042c137d750be85e5998f699a54d2a

‎compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js

+80-16
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<eafe6f8c93c68ef414c9c5d3e0c8f7dd>>
10+
* @generated SignedSource<<f0e56e2fe67e9208d392fd3e30b44313>>
1111
*/
1212

1313
"use strict";
@@ -8611,6 +8611,7 @@ to return true:wantsResponderID| |
86118611
var didWarnAboutStringRefs;
86128612
var ownerHasKeyUseWarning;
86138613
var ownerHasFunctionTypeWarning;
8614+
var ownerHasSymbolTypeWarning;
86148615

86158616
var warnForMissingKey = function (child, returnFiber) {};
86168617

@@ -8626,6 +8627,7 @@ to return true:wantsResponderID| |
86268627

86278628
ownerHasKeyUseWarning = {};
86288629
ownerHasFunctionTypeWarning = {};
8630+
ownerHasSymbolTypeWarning = {};
86298631

86308632
warnForMissingKey = function (child, returnFiber) {
86318633
if (child === null || typeof child !== "object") {
@@ -8808,22 +8810,68 @@ to return true:wantsResponderID| |
88088810
);
88098811
}
88108812

8811-
function warnOnFunctionType(returnFiber) {
8813+
function warnOnFunctionType(returnFiber, invalidChild) {
88128814
{
8813-
var componentName =
8814-
getComponentNameFromFiber(returnFiber) || "Component";
8815+
var parentName = getComponentNameFromFiber(returnFiber) || "Component";
88158816

8816-
if (ownerHasFunctionTypeWarning[componentName]) {
8817+
if (ownerHasFunctionTypeWarning[parentName]) {
88178818
return;
88188819
}
88198820

8820-
ownerHasFunctionTypeWarning[componentName] = true;
8821+
ownerHasFunctionTypeWarning[parentName] = true;
8822+
var name = invalidChild.displayName || invalidChild.name || "Component";
88218823

8822-
error(
8823-
"Functions are not valid as a React child. This may happen if " +
8824-
"you return a Component instead of <Component /> from render. " +
8825-
"Or maybe you meant to call this function rather than return it."
8826-
);
8824+
if (returnFiber.tag === HostRoot) {
8825+
error(
8826+
"Functions are not valid as a React child. This may happen if " +
8827+
"you return %s instead of <%s /> from render. " +
8828+
"Or maybe you meant to call this function rather than return it.\n" +
8829+
" root.render(%s)",
8830+
name,
8831+
name,
8832+
name
8833+
);
8834+
} else {
8835+
error(
8836+
"Functions are not valid as a React child. This may happen if " +
8837+
"you return %s instead of <%s /> from render. " +
8838+
"Or maybe you meant to call this function rather than return it.\n" +
8839+
" <%s>{%s}</%s>",
8840+
name,
8841+
name,
8842+
parentName,
8843+
name,
8844+
parentName
8845+
);
8846+
}
8847+
}
8848+
}
8849+
8850+
function warnOnSymbolType(returnFiber, invalidChild) {
8851+
{
8852+
var parentName = getComponentNameFromFiber(returnFiber) || "Component";
8853+
8854+
if (ownerHasSymbolTypeWarning[parentName]) {
8855+
return;
8856+
}
8857+
8858+
ownerHasSymbolTypeWarning[parentName] = true; // eslint-disable-next-line react-internal/safe-string-coercion
8859+
8860+
var name = String(invalidChild);
8861+
8862+
if (returnFiber.tag === HostRoot) {
8863+
error(
8864+
"Symbols are not valid as a React child.\n" + " root.render(%s)",
8865+
name
8866+
);
8867+
} else {
8868+
error(
8869+
"Symbols are not valid as a React child.\n" + " <%s>%s</%s>",
8870+
parentName,
8871+
name,
8872+
parentName
8873+
);
8874+
}
88278875
}
88288876
}
88298877

@@ -9208,7 +9256,11 @@ to return true:wantsResponderID| |
92089256

92099257
{
92109258
if (typeof newChild === "function") {
9211-
warnOnFunctionType(returnFiber);
9259+
warnOnFunctionType(returnFiber, newChild);
9260+
}
9261+
9262+
if (typeof newChild === "symbol") {
9263+
warnOnSymbolType(returnFiber, newChild);
92129264
}
92139265
}
92149266

@@ -9326,7 +9378,11 @@ to return true:wantsResponderID| |
93269378

93279379
{
93289380
if (typeof newChild === "function") {
9329-
warnOnFunctionType(returnFiber);
9381+
warnOnFunctionType(returnFiber, newChild);
9382+
}
9383+
9384+
if (typeof newChild === "symbol") {
9385+
warnOnSymbolType(returnFiber, newChild);
93309386
}
93319387
}
93329388

@@ -9446,7 +9502,11 @@ to return true:wantsResponderID| |
94469502

94479503
{
94489504
if (typeof newChild === "function") {
9449-
warnOnFunctionType(returnFiber);
9505+
warnOnFunctionType(returnFiber, newChild);
9506+
}
9507+
9508+
if (typeof newChild === "symbol") {
9509+
warnOnSymbolType(returnFiber, newChild);
94509510
}
94519511
}
94529512

@@ -10201,7 +10261,11 @@ to return true:wantsResponderID| |
1020110261

1020210262
{
1020310263
if (typeof newChild === "function") {
10204-
warnOnFunctionType(returnFiber);
10264+
warnOnFunctionType(returnFiber, newChild);
10265+
}
10266+
10267+
if (typeof newChild === "symbol") {
10268+
warnOnSymbolType(returnFiber, newChild);
1020510269
}
1020610270
} // Remaining cases are all treated as empty.
1020710271

@@ -27672,7 +27736,7 @@ to return true:wantsResponderID| |
2767227736
return root;
2767327737
}
2767427738

27675-
var ReactVersion = "18.3.0-canary-f6a619c0";
27739+
var ReactVersion = "18.3.0-canary-d5b088bd";
2767627740

2767727741
function createPortal$1(
2767827742
children,

0 commit comments

Comments
 (0)