Skip to content

Commit 43967e7

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 [c1fd2a9](c1fd2a9)
1 parent 0db83ce commit 43967e7

16 files changed

+730
-144
lines changed

‎compiled/facebook-www/REVISION

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

‎compiled/facebook-www/React-prod.classic.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -618,4 +618,4 @@ exports.useSyncExternalStore = function (
618618
exports.useTransition = function () {
619619
return ReactCurrentDispatcher.current.useTransition();
620620
};
621-
exports.version = "18.3.0-www-classic-863536b2";
621+
exports.version = "18.3.0-www-classic-3c4221fd";

‎compiled/facebook-www/React-prod.modern.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -610,4 +610,4 @@ exports.useSyncExternalStore = function (
610610
exports.useTransition = function () {
611611
return ReactCurrentDispatcher.current.useTransition();
612612
};
613-
exports.version = "18.3.0-www-modern-19268851";
613+
exports.version = "18.3.0-www-modern-a12e20fd";

‎compiled/facebook-www/ReactART-dev.classic.js

+79-15
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ if (__DEV__) {
6666
return self;
6767
}
6868

69-
var ReactVersion = "18.3.0-www-classic-162b9b5d";
69+
var ReactVersion = "18.3.0-www-classic-2901d413";
7070

7171
var LegacyRoot = 0;
7272
var ConcurrentRoot = 1;
@@ -6285,6 +6285,7 @@ if (__DEV__) {
62856285
var didWarnAboutStringRefs;
62866286
var ownerHasKeyUseWarning;
62876287
var ownerHasFunctionTypeWarning;
6288+
var ownerHasSymbolTypeWarning;
62886289

62896290
var warnForMissingKey = function (child, returnFiber) {};
62906291

@@ -6300,6 +6301,7 @@ if (__DEV__) {
63006301

63016302
ownerHasKeyUseWarning = {};
63026303
ownerHasFunctionTypeWarning = {};
6304+
ownerHasSymbolTypeWarning = {};
63036305

63046306
warnForMissingKey = function (child, returnFiber) {
63056307
if (child === null || typeof child !== "object") {
@@ -6482,22 +6484,68 @@ if (__DEV__) {
64826484
);
64836485
}
64846486

6485-
function warnOnFunctionType(returnFiber) {
6487+
function warnOnFunctionType(returnFiber, invalidChild) {
64866488
{
6487-
var componentName =
6488-
getComponentNameFromFiber(returnFiber) || "Component";
6489+
var parentName = getComponentNameFromFiber(returnFiber) || "Component";
64896490

6490-
if (ownerHasFunctionTypeWarning[componentName]) {
6491+
if (ownerHasFunctionTypeWarning[parentName]) {
64916492
return;
64926493
}
64936494

6494-
ownerHasFunctionTypeWarning[componentName] = true;
6495+
ownerHasFunctionTypeWarning[parentName] = true;
6496+
var name = invalidChild.displayName || invalidChild.name || "Component";
64956497

6496-
error(
6497-
"Functions are not valid as a React child. This may happen if " +
6498-
"you return a Component instead of <Component /> from render. " +
6499-
"Or maybe you meant to call this function rather than return it."
6500-
);
6498+
if (returnFiber.tag === HostRoot) {
6499+
error(
6500+
"Functions are not valid as a React child. This may happen if " +
6501+
"you return %s instead of <%s /> from render. " +
6502+
"Or maybe you meant to call this function rather than return it.\n" +
6503+
" root.render(%s)",
6504+
name,
6505+
name,
6506+
name
6507+
);
6508+
} else {
6509+
error(
6510+
"Functions are not valid as a React child. This may happen if " +
6511+
"you return %s instead of <%s /> from render. " +
6512+
"Or maybe you meant to call this function rather than return it.\n" +
6513+
" <%s>{%s}</%s>",
6514+
name,
6515+
name,
6516+
parentName,
6517+
name,
6518+
parentName
6519+
);
6520+
}
6521+
}
6522+
}
6523+
6524+
function warnOnSymbolType(returnFiber, invalidChild) {
6525+
{
6526+
var parentName = getComponentNameFromFiber(returnFiber) || "Component";
6527+
6528+
if (ownerHasSymbolTypeWarning[parentName]) {
6529+
return;
6530+
}
6531+
6532+
ownerHasSymbolTypeWarning[parentName] = true; // eslint-disable-next-line react-internal/safe-string-coercion
6533+
6534+
var name = String(invalidChild);
6535+
6536+
if (returnFiber.tag === HostRoot) {
6537+
error(
6538+
"Symbols are not valid as a React child.\n" + " root.render(%s)",
6539+
name
6540+
);
6541+
} else {
6542+
error(
6543+
"Symbols are not valid as a React child.\n" + " <%s>%s</%s>",
6544+
parentName,
6545+
name,
6546+
parentName
6547+
);
6548+
}
65016549
}
65026550
}
65036551

@@ -6882,7 +6930,11 @@ if (__DEV__) {
68826930

68836931
{
68846932
if (typeof newChild === "function") {
6885-
warnOnFunctionType(returnFiber);
6933+
warnOnFunctionType(returnFiber, newChild);
6934+
}
6935+
6936+
if (typeof newChild === "symbol") {
6937+
warnOnSymbolType(returnFiber, newChild);
68866938
}
68876939
}
68886940

@@ -7000,7 +7052,11 @@ if (__DEV__) {
70007052

70017053
{
70027054
if (typeof newChild === "function") {
7003-
warnOnFunctionType(returnFiber);
7055+
warnOnFunctionType(returnFiber, newChild);
7056+
}
7057+
7058+
if (typeof newChild === "symbol") {
7059+
warnOnSymbolType(returnFiber, newChild);
70047060
}
70057061
}
70067062

@@ -7120,7 +7176,11 @@ if (__DEV__) {
71207176

71217177
{
71227178
if (typeof newChild === "function") {
7123-
warnOnFunctionType(returnFiber);
7179+
warnOnFunctionType(returnFiber, newChild);
7180+
}
7181+
7182+
if (typeof newChild === "symbol") {
7183+
warnOnSymbolType(returnFiber, newChild);
71247184
}
71257185
}
71267186

@@ -7875,7 +7935,11 @@ if (__DEV__) {
78757935

78767936
{
78777937
if (typeof newChild === "function") {
7878-
warnOnFunctionType(returnFiber);
7938+
warnOnFunctionType(returnFiber, newChild);
7939+
}
7940+
7941+
if (typeof newChild === "symbol") {
7942+
warnOnSymbolType(returnFiber, newChild);
78797943
}
78807944
} // Remaining cases are all treated as empty.
78817945

‎compiled/facebook-www/ReactART-dev.modern.js

+79-15
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ if (__DEV__) {
6666
return self;
6767
}
6868

69-
var ReactVersion = "18.3.0-www-modern-4bc0b3fd";
69+
var ReactVersion = "18.3.0-www-modern-827e818d";
7070

7171
var LegacyRoot = 0;
7272
var ConcurrentRoot = 1;
@@ -6050,6 +6050,7 @@ if (__DEV__) {
60506050
var didWarnAboutStringRefs;
60516051
var ownerHasKeyUseWarning;
60526052
var ownerHasFunctionTypeWarning;
6053+
var ownerHasSymbolTypeWarning;
60536054

60546055
var warnForMissingKey = function (child, returnFiber) {};
60556056

@@ -6065,6 +6066,7 @@ if (__DEV__) {
60656066

60666067
ownerHasKeyUseWarning = {};
60676068
ownerHasFunctionTypeWarning = {};
6069+
ownerHasSymbolTypeWarning = {};
60686070

60696071
warnForMissingKey = function (child, returnFiber) {
60706072
if (child === null || typeof child !== "object") {
@@ -6247,22 +6249,68 @@ if (__DEV__) {
62476249
);
62486250
}
62496251

6250-
function warnOnFunctionType(returnFiber) {
6252+
function warnOnFunctionType(returnFiber, invalidChild) {
62516253
{
6252-
var componentName =
6253-
getComponentNameFromFiber(returnFiber) || "Component";
6254+
var parentName = getComponentNameFromFiber(returnFiber) || "Component";
62546255

6255-
if (ownerHasFunctionTypeWarning[componentName]) {
6256+
if (ownerHasFunctionTypeWarning[parentName]) {
62566257
return;
62576258
}
62586259

6259-
ownerHasFunctionTypeWarning[componentName] = true;
6260+
ownerHasFunctionTypeWarning[parentName] = true;
6261+
var name = invalidChild.displayName || invalidChild.name || "Component";
62606262

6261-
error(
6262-
"Functions are not valid as a React child. This may happen if " +
6263-
"you return a Component instead of <Component /> from render. " +
6264-
"Or maybe you meant to call this function rather than return it."
6265-
);
6263+
if (returnFiber.tag === HostRoot) {
6264+
error(
6265+
"Functions are not valid as a React child. This may happen if " +
6266+
"you return %s instead of <%s /> from render. " +
6267+
"Or maybe you meant to call this function rather than return it.\n" +
6268+
" root.render(%s)",
6269+
name,
6270+
name,
6271+
name
6272+
);
6273+
} else {
6274+
error(
6275+
"Functions are not valid as a React child. This may happen if " +
6276+
"you return %s instead of <%s /> from render. " +
6277+
"Or maybe you meant to call this function rather than return it.\n" +
6278+
" <%s>{%s}</%s>",
6279+
name,
6280+
name,
6281+
parentName,
6282+
name,
6283+
parentName
6284+
);
6285+
}
6286+
}
6287+
}
6288+
6289+
function warnOnSymbolType(returnFiber, invalidChild) {
6290+
{
6291+
var parentName = getComponentNameFromFiber(returnFiber) || "Component";
6292+
6293+
if (ownerHasSymbolTypeWarning[parentName]) {
6294+
return;
6295+
}
6296+
6297+
ownerHasSymbolTypeWarning[parentName] = true; // eslint-disable-next-line react-internal/safe-string-coercion
6298+
6299+
var name = String(invalidChild);
6300+
6301+
if (returnFiber.tag === HostRoot) {
6302+
error(
6303+
"Symbols are not valid as a React child.\n" + " root.render(%s)",
6304+
name
6305+
);
6306+
} else {
6307+
error(
6308+
"Symbols are not valid as a React child.\n" + " <%s>%s</%s>",
6309+
parentName,
6310+
name,
6311+
parentName
6312+
);
6313+
}
62666314
}
62676315
}
62686316

@@ -6647,7 +6695,11 @@ if (__DEV__) {
66476695

66486696
{
66496697
if (typeof newChild === "function") {
6650-
warnOnFunctionType(returnFiber);
6698+
warnOnFunctionType(returnFiber, newChild);
6699+
}
6700+
6701+
if (typeof newChild === "symbol") {
6702+
warnOnSymbolType(returnFiber, newChild);
66516703
}
66526704
}
66536705

@@ -6765,7 +6817,11 @@ if (__DEV__) {
67656817

67666818
{
67676819
if (typeof newChild === "function") {
6768-
warnOnFunctionType(returnFiber);
6820+
warnOnFunctionType(returnFiber, newChild);
6821+
}
6822+
6823+
if (typeof newChild === "symbol") {
6824+
warnOnSymbolType(returnFiber, newChild);
67696825
}
67706826
}
67716827

@@ -6885,7 +6941,11 @@ if (__DEV__) {
68856941

68866942
{
68876943
if (typeof newChild === "function") {
6888-
warnOnFunctionType(returnFiber);
6944+
warnOnFunctionType(returnFiber, newChild);
6945+
}
6946+
6947+
if (typeof newChild === "symbol") {
6948+
warnOnSymbolType(returnFiber, newChild);
68896949
}
68906950
}
68916951

@@ -7640,7 +7700,11 @@ if (__DEV__) {
76407700

76417701
{
76427702
if (typeof newChild === "function") {
7643-
warnOnFunctionType(returnFiber);
7703+
warnOnFunctionType(returnFiber, newChild);
7704+
}
7705+
7706+
if (typeof newChild === "symbol") {
7707+
warnOnSymbolType(returnFiber, newChild);
76447708
}
76457709
} // Remaining cases are all treated as empty.
76467710

0 commit comments

Comments
 (0)