Skip to content

Commit 3ff23f9

Browse files
sebmarkbagesebmarkbage
committed
[Flight] Better error message if you pass a function as a child to a client component (#28367)
Similar to #28362 but if you pass it to a client component. DiffTrain build for [2e84e16](2e84e16)
1 parent c456912 commit 3ff23f9

9 files changed

+71
-39
lines changed

‎compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
65a0e2b25ec4642f83c32d7599b5252c3955a60b
1+
2e84e1629924e6cb278638305fa92040f6ef6eb5

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

Lines changed: 1 addition & 1 deletion
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-f4161761";
613+
exports.version = "18.3.0-www-modern-cf1f133e";

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ if (__DEV__) {
1919
var React = require("react");
2020
var ReactDOM = require("react-dom");
2121

22-
var ReactVersion = "18.3.0-www-classic-a730f95d";
22+
var ReactVersion = "18.3.0-www-classic-cd3b8d66";
2323

2424
// This refers to a WWW module.
2525
var warningWWW = require("warning");
@@ -184,12 +184,15 @@ if (__DEV__) {
184184
return name;
185185
}
186186

187-
case "function":
187+
case "function": {
188188
if (value.$$typeof === CLIENT_REFERENCE_TAG) {
189189
return describeClientReference();
190190
}
191191

192-
return "function";
192+
var _name = value.displayName || value.name;
193+
194+
return _name ? "function " + _name : "function";
195+
}
193196

194197
default:
195198
// eslint-disable-next-line react-internal/safe-string-coercion
@@ -380,9 +383,9 @@ if (__DEV__) {
380383
str += ", ";
381384
}
382385

383-
var _name = _names[_i3];
384-
str += describeKeyForErrorMessage(_name) + ": ";
385-
var _value3 = _object[_name];
386+
var _name2 = _names[_i3];
387+
str += describeKeyForErrorMessage(_name2) + ": ";
388+
var _value3 = _object[_name2];
386389

387390
var _substr3 = void 0;
388391

@@ -392,7 +395,7 @@ if (__DEV__) {
392395
_substr3 = describeValueForErrorMessage(_value3);
393396
}
394397

395-
if (_name === expandedName) {
398+
if (_name2 === expandedName) {
396399
start = str.length;
397400
length = _substr3.length;
398401
str += _substr3;

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ if (__DEV__) {
1919
var React = require("react");
2020
var ReactDOM = require("react-dom");
2121

22-
var ReactVersion = "18.3.0-www-modern-2b72b29d";
22+
var ReactVersion = "18.3.0-www-modern-06e02b7d";
2323

2424
// This refers to a WWW module.
2525
var warningWWW = require("warning");
@@ -184,12 +184,15 @@ if (__DEV__) {
184184
return name;
185185
}
186186

187-
case "function":
187+
case "function": {
188188
if (value.$$typeof === CLIENT_REFERENCE_TAG) {
189189
return describeClientReference();
190190
}
191191

192-
return "function";
192+
var _name = value.displayName || value.name;
193+
194+
return _name ? "function " + _name : "function";
195+
}
193196

194197
default:
195198
// eslint-disable-next-line react-internal/safe-string-coercion
@@ -380,9 +383,9 @@ if (__DEV__) {
380383
str += ", ";
381384
}
382385

383-
var _name = _names[_i3];
384-
str += describeKeyForErrorMessage(_name) + ": ";
385-
var _value3 = _object[_name];
386+
var _name2 = _names[_i3];
387+
str += describeKeyForErrorMessage(_name2) + ": ";
388+
var _value3 = _object[_name2];
386389

387390
var _substr3 = void 0;
388391

@@ -392,7 +395,7 @@ if (__DEV__) {
392395
_substr3 = describeValueForErrorMessage(_value3);
393396
}
394397

395-
if (_name === expandedName) {
398+
if (_name2 === expandedName) {
396399
start = str.length;
397400
length = _substr3.length;
398401
str += _substr3;

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -182,12 +182,15 @@ if (__DEV__) {
182182
return name;
183183
}
184184

185-
case "function":
185+
case "function": {
186186
if (value.$$typeof === CLIENT_REFERENCE_TAG) {
187187
return describeClientReference();
188188
}
189189

190-
return "function";
190+
var _name = value.displayName || value.name;
191+
192+
return _name ? "function " + _name : "function";
193+
}
191194

192195
default:
193196
// eslint-disable-next-line react-internal/safe-string-coercion
@@ -378,9 +381,9 @@ if (__DEV__) {
378381
str += ", ";
379382
}
380383

381-
var _name = _names[_i3];
382-
str += describeKeyForErrorMessage(_name) + ": ";
383-
var _value3 = _object[_name];
384+
var _name2 = _names[_i3];
385+
str += describeKeyForErrorMessage(_name2) + ": ";
386+
var _value3 = _object[_name2];
384387

385388
var _substr3 = void 0;
386389

@@ -390,7 +393,7 @@ if (__DEV__) {
390393
_substr3 = describeValueForErrorMessage(_value3);
391394
}
392395

393-
if (_name === expandedName) {
396+
if (_name2 === expandedName) {
394397
start = str.length;
395398
length = _substr3.length;
396399
str += _substr3;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17085,7 +17085,7 @@ Internals.Events = [
1708517085
var devToolsConfig$jscomp$inline_1783 = {
1708617086
findFiberByHostInstance: getClosestInstanceFromNode,
1708717087
bundleType: 0,
17088-
version: "18.3.0-www-modern-448aa5e1",
17088+
version: "18.3.0-www-modern-90e18ae7",
1708917089
rendererPackageName: "react-dom"
1709017090
};
1709117091
var internals$jscomp$inline_2154 = {
@@ -17116,7 +17116,7 @@ var internals$jscomp$inline_2154 = {
1711617116
scheduleRoot: null,
1711717117
setRefreshHandler: null,
1711817118
getCurrentFiber: null,
17119-
reconcilerVersion: "18.3.0-www-modern-448aa5e1"
17119+
reconcilerVersion: "18.3.0-www-modern-90e18ae7"
1712017120
};
1712117121
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1712217122
var hook$jscomp$inline_2155 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17537,4 +17537,4 @@ exports.useFormState = function (action, initialState, permalink) {
1753717537
exports.useFormStatus = function () {
1753817538
return ReactCurrentDispatcher$2.current.useHostTransitionStatus();
1753917539
};
17540-
exports.version = "18.3.0-www-modern-448aa5e1";
17540+
exports.version = "18.3.0-www-modern-90e18ae7";

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

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -842,12 +842,15 @@ if (__DEV__) {
842842
return name;
843843
}
844844

845-
case "function":
845+
case "function": {
846846
if (value.$$typeof === CLIENT_REFERENCE_TAG) {
847847
return describeClientReference();
848848
}
849849

850-
return "function";
850+
var _name = value.displayName || value.name;
851+
852+
return _name ? "function " + _name : "function";
853+
}
851854

852855
default:
853856
// eslint-disable-next-line react-internal/safe-string-coercion
@@ -1038,9 +1041,9 @@ if (__DEV__) {
10381041
str += ", ";
10391042
}
10401043

1041-
var _name = _names[_i3];
1042-
str += describeKeyForErrorMessage(_name) + ": ";
1043-
var _value3 = _object[_name];
1044+
var _name2 = _names[_i3];
1045+
str += describeKeyForErrorMessage(_name2) + ": ";
1046+
var _value3 = _object[_name2];
10441047

10451048
var _substr3 = void 0;
10461049

@@ -1050,7 +1053,7 @@ if (__DEV__) {
10501053
_substr3 = describeValueForErrorMessage(_value3);
10511054
}
10521055

1053-
if (_name === expandedName) {
1056+
if (_name2 === expandedName) {
10541057
start = str.length;
10551058
length = _substr3.length;
10561059
str += _substr3;
@@ -2263,10 +2266,26 @@ if (__DEV__) {
22632266
describeObjectForErrorMessage(parent, parentPropertyName) +
22642267
"\nIf you need interactivity, consider converting part of this to a Client Component."
22652268
);
2269+
} else if (
2270+
jsxChildrenParents.has(parent) ||
2271+
(jsxPropsParents.has(parent) && parentPropertyName === "children")
2272+
) {
2273+
var componentName = value.displayName || value.name || "Component";
2274+
throw new Error(
2275+
"Functions are not valid as a child of Client Components. This may happen if " +
2276+
"you return " +
2277+
componentName +
2278+
" instead of <" +
2279+
componentName +
2280+
" /> from render. " +
2281+
"Or maybe you meant to call this function rather than return it." +
2282+
describeObjectForErrorMessage(parent, parentPropertyName)
2283+
);
22662284
} else {
22672285
throw new Error(
22682286
"Functions cannot be passed directly to Client Components " +
2269-
'unless you explicitly expose it by marking it with "use server".' +
2287+
'unless you explicitly expose it by marking it with "use server". ' +
2288+
"Or maybe you meant to call this function rather than return it." +
22702289
describeObjectForErrorMessage(parent, parentPropertyName)
22712290
);
22722291
}

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

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,11 @@ function describeValueForErrorMessage(value) {
351351
value = objectName(value);
352352
return "Object" === value ? "{...}" : value;
353353
case "function":
354-
return value.$$typeof === CLIENT_REFERENCE_TAG ? "client" : "function";
354+
return value.$$typeof === CLIENT_REFERENCE_TAG
355+
? "client"
356+
: (value = value.displayName || value.name)
357+
? "function " + value
358+
: "function";
355359
default:
356360
return String(value);
357361
}
@@ -920,18 +924,18 @@ function renderModelDestructive(
920924
}
921925
if ("symbol" === typeof value) {
922926
task = request.writtenSymbols;
923-
var existingId$8 = task.get(value);
924-
if (void 0 !== existingId$8) return serializeByValueID(existingId$8);
925-
existingId$8 = value.description;
926-
if (Symbol.for(existingId$8) !== value)
927+
var existingId$9 = task.get(value);
928+
if (void 0 !== existingId$9) return serializeByValueID(existingId$9);
929+
existingId$9 = value.description;
930+
if (Symbol.for(existingId$9) !== value)
927931
throw Error(
928932
"Only global symbols received from Symbol.for(...) can be passed to Client Components. The symbol Symbol.for(" +
929933
(value.description + ") cannot be found among global symbols.") +
930934
describeObjectForErrorMessage(parent, parentPropertyName)
931935
);
932936
request.pendingChunks++;
933937
parent = request.nextChunkId++;
934-
parentPropertyName = stringify("$S" + existingId$8);
938+
parentPropertyName = stringify("$S" + existingId$9);
935939
parentPropertyName = parent.toString(16) + ":" + parentPropertyName + "\n";
936940
request.completedImportChunks.push(parentPropertyName);
937941
task.set(value, parent);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26067,7 +26067,7 @@ if (__DEV__) {
2606726067
return root;
2606826068
}
2606926069

26070-
var ReactVersion = "18.3.0-www-modern-f239ff56";
26070+
var ReactVersion = "18.3.0-www-modern-c4de807b";
2607126071

2607226072
// Might add PROFILE later.
2607326073

0 commit comments

Comments
 (0)