Skip to content

Commit

Permalink
Include the function name for context on invalid function child (#28362)
Browse files Browse the repository at this point in the history 
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)
  • Loading branch information
@sebmarkbage
sebmarkbage committed Feb 17, 2024
1 parent 0db83ce commit 43967e7
Show file tree
Hide file tree
Showing 16 changed files with 730 additions and 144 deletions.
2 changes: 1 addition & 1 deletion compiled/facebook-www/REVISION
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
ef72271c2d1234c9d1e1358f8083021089a50faa
c1fd2a91b1042c137d750be85e5998f699a54d2a
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-prod.classic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -618,4 +618,4 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactCurrentDispatcher.current.useTransition();
};
exports.version = "18.3.0-www-classic-863536b2";
exports.version = "18.3.0-www-classic-3c4221fd";
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-prod.modern.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -610,4 +610,4 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactCurrentDispatcher.current.useTransition();
};
exports.version = "18.3.0-www-modern-19268851";
exports.version = "18.3.0-www-modern-a12e20fd";
94 changes: 79 additions & 15 deletions compiled/facebook-www/ReactART-dev.classic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ if (__DEV__) {
return self;
}

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

var LegacyRoot = 0;
var ConcurrentRoot = 1;
Expand Down Expand Up @@ -6285,6 +6285,7 @@ if (__DEV__) {
var didWarnAboutStringRefs;
var ownerHasKeyUseWarning;
var ownerHasFunctionTypeWarning;
var ownerHasSymbolTypeWarning;

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

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

ownerHasKeyUseWarning = {};
ownerHasFunctionTypeWarning = {};
ownerHasSymbolTypeWarning = {};

warnForMissingKey = function (child, returnFiber) {
if (child === null || typeof child !== "object") {
Expand Down Expand Up @@ -6482,22 +6484,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
);
}
}
}

Expand Down Expand Up @@ -6882,7 +6930,11 @@ if (__DEV__) {

{
if (typeof newChild === "function") {
warnOnFunctionType(returnFiber);
warnOnFunctionType(returnFiber, newChild);
}

if (typeof newChild === "symbol") {
warnOnSymbolType(returnFiber, newChild);
}
}

Expand Down Expand Up @@ -7000,7 +7052,11 @@ if (__DEV__) {

{
if (typeof newChild === "function") {
warnOnFunctionType(returnFiber);
warnOnFunctionType(returnFiber, newChild);
}

if (typeof newChild === "symbol") {
warnOnSymbolType(returnFiber, newChild);
}
}

Expand Down Expand Up @@ -7120,7 +7176,11 @@ if (__DEV__) {

{
if (typeof newChild === "function") {
warnOnFunctionType(returnFiber);
warnOnFunctionType(returnFiber, newChild);
}

if (typeof newChild === "symbol") {
warnOnSymbolType(returnFiber, newChild);
}
}

Expand Down Expand Up @@ -7875,7 +7935,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.

Expand Down
94 changes: 79 additions & 15 deletions compiled/facebook-www/ReactART-dev.modern.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ if (__DEV__) {
return self;
}

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

var LegacyRoot = 0;
var ConcurrentRoot = 1;
Expand Down Expand Up @@ -6050,6 +6050,7 @@ if (__DEV__) {
var didWarnAboutStringRefs;
var ownerHasKeyUseWarning;
var ownerHasFunctionTypeWarning;
var ownerHasSymbolTypeWarning;

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

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

ownerHasKeyUseWarning = {};
ownerHasFunctionTypeWarning = {};
ownerHasSymbolTypeWarning = {};

warnForMissingKey = function (child, returnFiber) {
if (child === null || typeof child !== "object") {
Expand Down Expand Up @@ -6247,22 +6249,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
);
}
}
}

Expand Down Expand Up @@ -6647,7 +6695,11 @@ if (__DEV__) {

{
if (typeof newChild === "function") {
warnOnFunctionType(returnFiber);
warnOnFunctionType(returnFiber, newChild);
}

if (typeof newChild === "symbol") {
warnOnSymbolType(returnFiber, newChild);
}
}

Expand Down Expand Up @@ -6765,7 +6817,11 @@ if (__DEV__) {

{
if (typeof newChild === "function") {
warnOnFunctionType(returnFiber);
warnOnFunctionType(returnFiber, newChild);
}

if (typeof newChild === "symbol") {
warnOnSymbolType(returnFiber, newChild);
}
}

Expand Down Expand Up @@ -6885,7 +6941,11 @@ if (__DEV__) {

{
if (typeof newChild === "function") {
warnOnFunctionType(returnFiber);
warnOnFunctionType(returnFiber, newChild);
}

if (typeof newChild === "symbol") {
warnOnSymbolType(returnFiber, newChild);
}
}

Expand Down Expand Up @@ -7640,7 +7700,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.

Expand Down
Loading

0 comments on commit 43967e7

Please sign in to comment.