Improve Error Messages when Access Client References (#26059)

This renames Module References to Client References, since they are in
the server->client direction.

I also changed the Proxies exposed from the `node-register` loader to
provide better error messages. Ideally, some of this should be
replicated in the ESM loader too but neither are the source of truth.
We'll replicate this in the static form in the Next.js loaders. cc
@huozhi @shuding

- All references are now functions so that when you call them on the
server, we can yield a better error message.
- References that are themselves already referring to an export name are
now proxies that error when you dot into them.
- `use(...)` can now be used on a client reference to unwrap it server
side and then pass a reference to the awaited value.

DiffTrain build for [ce09ace9a2](https://github.com/facebook/react/commit/ce09ace9a23b61dfba53f5a83d52b377bc642bae)
[View git log for this commit](https://github.com/facebook/react/commits/ce09ace9a23b61dfba53f5a83d52b377bc642bae)
This commit is contained in:
sebmarkbage
2023-01-28 01:16:20 +00:00
parent d2a83f388f
commit c3a0c0efdd
43 changed files with 132 additions and 98 deletions
@@ -136,7 +136,7 @@ var enableProfilerNestedUpdateScheduledHook =
var enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler; // Note: we'll want to remove this when we to userland implementation.
var REACT_MODULE_REFERENCE = Symbol.for("react.module.reference");
var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
function isValidElementType(type) {
if (typeof type === "string" || typeof type === "function") {
return true;
@@ -168,7 +168,7 @@ function isValidElementType(type) {
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
type.$$typeof === REACT_MODULE_REFERENCE ||
type.$$typeof === REACT_CLIENT_REFERENCE ||
type.getModuleId !== undefined
) {
return true;
@@ -136,7 +136,7 @@ var enableProfilerNestedUpdateScheduledHook =
var enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler; // Note: we'll want to remove this when we to userland implementation.
var REACT_MODULE_REFERENCE = Symbol.for("react.module.reference");
var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
function isValidElementType(type) {
if (typeof type === "string" || typeof type === "function") {
return true;
@@ -168,7 +168,7 @@ function isValidElementType(type) {
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
type.$$typeof === REACT_MODULE_REFERENCE ||
type.$$typeof === REACT_CLIENT_REFERENCE ||
type.getModuleId !== undefined
) {
return true;
+1 -1
View File
@@ -1 +1 @@
78c4bec207795e718b5f4acc48ade19c8b94bf1f
ce09ace9a23b61dfba53f5a83d52b377bc642bae
+1 -1
View File
@@ -1 +1 @@
78c4bec207795e718b5f4acc48ade19c8b94bf1f
ce09ace9a23b61dfba53f5a83d52b377bc642bae
+3 -3
View File
@@ -27,7 +27,7 @@ if (
}
"use strict";
var ReactVersion = "18.3.0-www-classic-78c4bec20-20230127";
var ReactVersion = "18.3.0-www-classic-ce09ace9a-20230127";
// ATTENTION
// When adding new symbols to this file,
@@ -1685,7 +1685,7 @@ function forwardRef(render) {
return elementType;
}
var REACT_MODULE_REFERENCE = Symbol.for("react.module.reference");
var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
function isValidElementType(type) {
if (typeof type === "string" || typeof type === "function") {
return true;
@@ -1717,7 +1717,7 @@ function isValidElementType(type) {
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
type.$$typeof === REACT_MODULE_REFERENCE ||
type.$$typeof === REACT_CLIENT_REFERENCE ||
type.getModuleId !== undefined
) {
return true;
+3 -3
View File
@@ -27,7 +27,7 @@ if (
}
"use strict";
var ReactVersion = "18.3.0-www-modern-78c4bec20-20230127";
var ReactVersion = "18.3.0-www-modern-ce09ace9a-20230127";
// ATTENTION
// When adding new symbols to this file,
@@ -1685,7 +1685,7 @@ function forwardRef(render) {
return elementType;
}
var REACT_MODULE_REFERENCE = Symbol.for("react.module.reference");
var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
function isValidElementType(type) {
if (typeof type === "string" || typeof type === "function") {
return true;
@@ -1717,7 +1717,7 @@ function isValidElementType(type) {
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
type.$$typeof === REACT_MODULE_REFERENCE ||
type.$$typeof === REACT_CLIENT_REFERENCE ||
type.getModuleId !== undefined
) {
return true;
+1 -1
View File
@@ -643,4 +643,4 @@ exports.useSyncExternalStore = function(
);
};
exports.useTransition = useTransition;
exports.version = "18.3.0-www-classic-78c4bec20-20230127";
exports.version = "18.3.0-www-classic-ce09ace9a-20230127";
+1 -1
View File
@@ -635,4 +635,4 @@ exports.useSyncExternalStore = function(
);
};
exports.useTransition = useTransition;
exports.version = "18.3.0-www-modern-78c4bec20-20230127";
exports.version = "18.3.0-www-modern-ce09ace9a-20230127";
@@ -654,7 +654,7 @@ exports.useSyncExternalStore = function(
);
};
exports.useTransition = useTransition;
exports.version = "18.3.0-www-classic-78c4bec20-20230127";
exports.version = "18.3.0-www-classic-ce09ace9a-20230127";
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
if (
@@ -646,7 +646,7 @@ exports.useSyncExternalStore = function(
);
};
exports.useTransition = useTransition;
exports.version = "18.3.0-www-modern-78c4bec20-20230127";
exports.version = "18.3.0-www-modern-ce09ace9a-20230127";
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
if (
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
return self;
}
var ReactVersion = "18.3.0-www-classic-78c4bec20-20230127";
var ReactVersion = "18.3.0-www-classic-ce09ace9a-20230127";
var LegacyRoot = 0;
var ConcurrentRoot = 1;
+1 -1
View File
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
return self;
}
var ReactVersion = "18.3.0-www-modern-78c4bec20-20230127";
var ReactVersion = "18.3.0-www-modern-ce09ace9a-20230127";
var LegacyRoot = 0;
var ConcurrentRoot = 1;
@@ -9804,7 +9804,7 @@ var slice = Array.prototype.slice,
return null;
},
bundleType: 0,
version: "18.3.0-www-classic-78c4bec20-20230127",
version: "18.3.0-www-classic-ce09ace9a-20230127",
rendererPackageName: "react-art"
};
var internals$jscomp$inline_1318 = {
@@ -9835,7 +9835,7 @@ var internals$jscomp$inline_1318 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-78c4bec20-20230127"
reconcilerVersion: "18.3.0-next-ce09ace9a-20230127"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1319 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -9471,7 +9471,7 @@ var slice = Array.prototype.slice,
return null;
},
bundleType: 0,
version: "18.3.0-www-modern-78c4bec20-20230127",
version: "18.3.0-www-modern-ce09ace9a-20230127",
rendererPackageName: "react-art"
};
var internals$jscomp$inline_1309 = {
@@ -9502,7 +9502,7 @@ var internals$jscomp$inline_1309 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-78c4bec20-20230127"
reconcilerVersion: "18.3.0-next-ce09ace9a-20230127"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1310 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -42646,7 +42646,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-classic-78c4bec20-20230127";
var ReactVersion = "18.3.0-www-classic-ce09ace9a-20230127";
function createPortal(
children,
+1 -1
View File
@@ -42370,7 +42370,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-modern-78c4bec20-20230127";
var ReactVersion = "18.3.0-www-modern-ce09ace9a-20230127";
function createPortal(
children,
@@ -15529,7 +15529,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1750 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-classic-78c4bec20-20230127",
version: "18.3.0-www-classic-ce09ace9a-20230127",
rendererPackageName: "react-dom"
};
var internals$jscomp$inline_2134 = {
@@ -15559,7 +15559,7 @@ var internals$jscomp$inline_2134 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-78c4bec20-20230127"
reconcilerVersion: "18.3.0-next-ce09ace9a-20230127"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_2135 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -15801,4 +15801,4 @@ exports.unstable_renderSubtreeIntoContainer = function(
);
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-next-78c4bec20-20230127";
exports.version = "18.3.0-next-ce09ace9a-20230127";
@@ -15090,7 +15090,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1718 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-modern-78c4bec20-20230127",
version: "18.3.0-www-modern-ce09ace9a-20230127",
rendererPackageName: "react-dom"
};
var internals$jscomp$inline_2109 = {
@@ -15121,7 +15121,7 @@ var internals$jscomp$inline_2109 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-78c4bec20-20230127"
reconcilerVersion: "18.3.0-next-ce09ace9a-20230127"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_2110 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -15309,4 +15309,4 @@ exports.unstable_flushControlled = function(fn) {
}
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-next-78c4bec20-20230127";
exports.version = "18.3.0-next-ce09ace9a-20230127";
@@ -16299,7 +16299,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1824 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-classic-78c4bec20-20230127",
version: "18.3.0-www-classic-ce09ace9a-20230127",
rendererPackageName: "react-dom"
};
(function(internals) {
@@ -16343,7 +16343,7 @@ var devToolsConfig$jscomp$inline_1824 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-78c4bec20-20230127"
reconcilerVersion: "18.3.0-next-ce09ace9a-20230127"
});
assign(Internals, {
ReactBrowserEventEmitter: {
@@ -16572,7 +16572,7 @@ exports.unstable_renderSubtreeIntoContainer = function(
);
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-next-78c4bec20-20230127";
exports.version = "18.3.0-next-ce09ace9a-20230127";
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
if (
@@ -15850,7 +15850,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1792 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-modern-78c4bec20-20230127",
version: "18.3.0-www-modern-ce09ace9a-20230127",
rendererPackageName: "react-dom"
};
(function(internals) {
@@ -15895,7 +15895,7 @@ var devToolsConfig$jscomp$inline_1792 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-78c4bec20-20230127"
reconcilerVersion: "18.3.0-next-ce09ace9a-20230127"
});
exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
exports.createPortal = function(children, container) {
@@ -16070,7 +16070,7 @@ exports.unstable_flushControlled = function(fn) {
}
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-next-78c4bec20-20230127";
exports.version = "18.3.0-next-ce09ace9a-20230127";
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
if (
@@ -19,7 +19,7 @@ if (__DEV__) {
var React = require("react");
var ReactDOM = require("react-dom");
var ReactVersion = "18.3.0-www-classic-78c4bec20-20230127";
var ReactVersion = "18.3.0-www-classic-ce09ace9a-20230127";
// This refers to a WWW module.
var warningWWW = require("warning");
@@ -19,7 +19,7 @@ if (__DEV__) {
var React = require("react");
var ReactDOM = require("react-dom");
var ReactVersion = "18.3.0-www-modern-78c4bec20-20230127";
var ReactVersion = "18.3.0-www-modern-ce09ace9a-20230127";
// This refers to a WWW module.
var warningWWW = require("warning");
@@ -3633,4 +3633,4 @@ exports.renderToString = function(children, options) {
'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
);
};
exports.version = "18.3.0-www-classic-78c4bec20-20230127";
exports.version = "18.3.0-www-classic-ce09ace9a-20230127";
@@ -3546,4 +3546,4 @@ exports.renderToString = function(children, options) {
'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
);
};
exports.version = "18.3.0-www-modern-78c4bec20-20230127";
exports.version = "18.3.0-www-modern-ce09ace9a-20230127";
@@ -31185,7 +31185,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-classic-78c4bec20-20230127";
var ReactVersion = "18.3.0-www-classic-ce09ace9a-20230127";
function createPortal(
children,
@@ -38498,7 +38498,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-modern-78c4bec20-20230127";
var ReactVersion = "18.3.0-www-modern-ce09ace9a-20230127";
function createPortal(
children,
@@ -11328,7 +11328,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1518 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-classic-78c4bec20-20230127",
version: "18.3.0-www-classic-ce09ace9a-20230127",
rendererPackageName: "react-dom"
};
var internals$jscomp$inline_2047 = {
@@ -11358,7 +11358,7 @@ var internals$jscomp$inline_2047 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-78c4bec20-20230127"
reconcilerVersion: "18.3.0-next-ce09ace9a-20230127"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_2048 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -14847,4 +14847,4 @@ exports.unstable_renderSubtreeIntoContainer = function(
);
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-next-78c4bec20-20230127";
exports.version = "18.3.0-next-ce09ace9a-20230127";
@@ -13967,7 +13967,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1673 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-modern-78c4bec20-20230127",
version: "18.3.0-www-modern-ce09ace9a-20230127",
rendererPackageName: "react-dom"
};
var internals$jscomp$inline_2072 = {
@@ -13998,7 +13998,7 @@ var internals$jscomp$inline_2072 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-78c4bec20-20230127"
reconcilerVersion: "18.3.0-next-ce09ace9a-20230127"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_2073 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -14321,4 +14321,4 @@ exports.unstable_flushControlled = function(fn) {
}
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-next-78c4bec20-20230127";
exports.version = "18.3.0-next-ce09ace9a-20230127";
@@ -25,8 +25,8 @@ function isArray(a) {
return isArrayImpl(a);
}
function resolveModuleReference(bundlerConfig, moduleData) {
return ReactFlightDOMRelayClientIntegration.resolveModuleReference(
function resolveClientReference(bundlerConfig, moduleData) {
return ReactFlightDOMRelayClientIntegration.resolveClientReference(
moduleData
);
} // $FlowFixMe[missing-local-annot]
@@ -544,7 +544,7 @@ function resolveModule(response, id, model) {
var chunks = response._chunks;
var chunk = chunks.get(id);
var moduleMetaData = parseModel(response, model);
var moduleReference = resolveModuleReference(
var moduleReference = resolveClientReference(
response._bundlerConfig,
moduleMetaData
); // TODO: Add an option to encode modules that are lazy loaded.
@@ -25,8 +25,8 @@ function isArray(a) {
return isArrayImpl(a);
}
function resolveModuleReference(bundlerConfig, moduleData) {
return ReactFlightDOMRelayClientIntegration.resolveModuleReference(
function resolveClientReference(bundlerConfig, moduleData) {
return ReactFlightDOMRelayClientIntegration.resolveClientReference(
moduleData
);
} // $FlowFixMe[missing-local-annot]
@@ -544,7 +544,7 @@ function resolveModule(response, id, model) {
var chunks = response._chunks;
var chunk = chunks.get(id);
var moduleMetaData = parseModel(response, model);
var moduleReference = resolveModuleReference(
var moduleReference = resolveClientReference(
response._bundlerConfig,
moduleMetaData
); // TODO: Add an option to encode modules that are lazy loaded.
@@ -266,7 +266,7 @@ function resolveModule(response, id, model) {
var chunks = response._chunks,
chunk = chunks.get(id);
model = parseModelRecursively(response, dummy, "", model);
var moduleReference = ReactFlightDOMRelayClientIntegration.resolveModuleReference(
var moduleReference = ReactFlightDOMRelayClientIntegration.resolveClientReference(
model
);
if (
@@ -266,7 +266,7 @@ function resolveModule(response, id, model) {
var chunks = response._chunks,
chunk = chunks.get(id);
model = parseModelRecursively(response, dummy, "", model);
var moduleReference = ReactFlightDOMRelayClientIntegration.resolveModuleReference(
var moduleReference = ReactFlightDOMRelayClientIntegration.resolveClientReference(
model
);
if (
@@ -73,10 +73,10 @@ function isArray(a) {
return isArrayImpl(a);
}
function isModuleReference(reference) {
function isClientReference(reference) {
return reference instanceof JSResourceReferenceImpl;
}
function getModuleKey(reference) {
function getClientReferenceKey(reference) {
// We use the reference object itself as the key because we assume the
// object will be cached by the bundler runtime.
return reference;
@@ -1073,7 +1073,11 @@ function getThenableStateAfterSuspending() {
function readContext$1(context) {
{
if (context.$$typeof !== REACT_SERVER_CONTEXT_TYPE) {
error("Only createServerContext is supported in Server Components.");
if (isClientReference(context)) {
error("Cannot read a Client Context from a Server Component.");
} else {
error("Only createServerContext is supported in Server Components.");
}
}
if (currentRequest === null) {
@@ -1147,7 +1151,10 @@ function useId() {
}
function use(usable) {
if (usable !== null && typeof usable === "object") {
if (
(usable !== null && typeof usable === "object") ||
typeof usable === "function"
) {
// $FlowFixMe[method-unbinding]
if (typeof usable.then === "function") {
// This is a thenable.
@@ -1165,6 +1172,12 @@ function use(usable) {
var context = usable;
return readContext$1(context);
}
}
{
if (isClientReference(usable)) {
error("Cannot use() an already resolved Client Reference.");
}
} // eslint-disable-next-line react-internal/safe-string-coercion
throw new Error("An unsupported type was passed to use(): " + String(usable));
@@ -1381,7 +1394,7 @@ function attemptResolveElement(type, key, ref, props, prevThenableState) {
}
if (typeof type === "function") {
if (isModuleReference(type)) {
if (isClientReference(type)) {
// This is a reference to a Client Component.
return [REACT_ELEMENT_TYPE, type, key, props];
} // This is a server-side component.
@@ -1413,7 +1426,7 @@ function attemptResolveElement(type, key, ref, props, prevThenableState) {
return [REACT_ELEMENT_TYPE, type, key, props];
} else if (type != null && typeof type === "object") {
if (isModuleReference(type)) {
if (isClientReference(type)) {
// This is a reference to a Client Component.
return [REACT_ELEMENT_TYPE, type, key, props];
}
@@ -1522,8 +1535,8 @@ function serializeByRefID(id) {
return "@" + id.toString(16);
}
function serializeModuleReference(request, parent, key, moduleReference) {
var moduleKey = getModuleKey(moduleReference);
function serializeClientReference(request, parent, key, moduleReference) {
var moduleKey = getClientReferenceKey(moduleReference);
var writtenModules = request.writtenModules;
var existingId = writtenModules.get(moduleKey);
@@ -2042,8 +2055,8 @@ function resolveModelToJSON(request, parent, key, value) {
}
if (typeof value === "object") {
if (isModuleReference(value)) {
return serializeModuleReference(request, parent, key, value);
if (isClientReference(value)) {
return serializeClientReference(request, parent, key, value);
} else if (value.$$typeof === REACT_PROVIDER_TYPE) {
var providerKey = value._context._globalName;
var writtenProviders = request.writtenProviders;
@@ -2115,8 +2128,8 @@ function resolveModelToJSON(request, parent, key, value) {
}
if (typeof value === "function") {
if (isModuleReference(value)) {
return serializeModuleReference(request, parent, key, value);
if (isClientReference(value)) {
return serializeClientReference(request, parent, key, value);
}
if (/^on[A-Z]/.test(key)) {
@@ -73,10 +73,10 @@ function isArray(a) {
return isArrayImpl(a);
}
function isModuleReference(reference) {
function isClientReference(reference) {
return reference instanceof JSResourceReferenceImpl;
}
function getModuleKey(reference) {
function getClientReferenceKey(reference) {
// We use the reference object itself as the key because we assume the
// object will be cached by the bundler runtime.
return reference;
@@ -1077,7 +1077,11 @@ function getThenableStateAfterSuspending() {
function readContext$1(context) {
{
if (context.$$typeof !== REACT_SERVER_CONTEXT_TYPE) {
error("Only createServerContext is supported in Server Components.");
if (isClientReference(context)) {
error("Cannot read a Client Context from a Server Component.");
} else {
error("Only createServerContext is supported in Server Components.");
}
}
if (currentRequest === null) {
@@ -1151,7 +1155,10 @@ function useId() {
}
function use(usable) {
if (usable !== null && typeof usable === "object") {
if (
(usable !== null && typeof usable === "object") ||
typeof usable === "function"
) {
// $FlowFixMe[method-unbinding]
if (typeof usable.then === "function") {
// This is a thenable.
@@ -1169,6 +1176,12 @@ function use(usable) {
var context = usable;
return readContext$1(context);
}
}
{
if (isClientReference(usable)) {
error("Cannot use() an already resolved Client Reference.");
}
} // eslint-disable-next-line react-internal/safe-string-coercion
throw new Error("An unsupported type was passed to use(): " + String(usable));
@@ -1385,7 +1398,7 @@ function attemptResolveElement(type, key, ref, props, prevThenableState) {
}
if (typeof type === "function") {
if (isModuleReference(type)) {
if (isClientReference(type)) {
// This is a reference to a Client Component.
return [REACT_ELEMENT_TYPE, type, key, props];
} // This is a server-side component.
@@ -1417,7 +1430,7 @@ function attemptResolveElement(type, key, ref, props, prevThenableState) {
return [REACT_ELEMENT_TYPE, type, key, props];
} else if (type != null && typeof type === "object") {
if (isModuleReference(type)) {
if (isClientReference(type)) {
// This is a reference to a Client Component.
return [REACT_ELEMENT_TYPE, type, key, props];
}
@@ -1526,8 +1539,8 @@ function serializeByRefID(id) {
return "@" + id.toString(16);
}
function serializeModuleReference(request, parent, key, moduleReference) {
var moduleKey = getModuleKey(moduleReference);
function serializeClientReference(request, parent, key, moduleReference) {
var moduleKey = getClientReferenceKey(moduleReference);
var writtenModules = request.writtenModules;
var existingId = writtenModules.get(moduleKey);
@@ -2046,8 +2059,8 @@ function resolveModelToJSON(request, parent, key, value) {
}
if (typeof value === "object") {
if (isModuleReference(value)) {
return serializeModuleReference(request, parent, key, value);
if (isClientReference(value)) {
return serializeClientReference(request, parent, key, value);
} else if (value.$$typeof === REACT_PROVIDER_TYPE) {
var providerKey = value._context._globalName;
var writtenProviders = request.writtenProviders;
@@ -2119,8 +2132,8 @@ function resolveModelToJSON(request, parent, key, value) {
}
if (typeof value === "function") {
if (isModuleReference(value)) {
return serializeModuleReference(request, parent, key, value);
if (isClientReference(value)) {
return serializeClientReference(request, parent, key, value);
}
if (/^on[A-Z]/.test(key)) {
@@ -430,7 +430,10 @@ function useId() {
return ":" + currentRequest.identifierPrefix + "S" + id.toString(32) + ":";
}
function use(usable) {
if (null !== usable && "object" === typeof usable) {
if (
(null !== usable && "object" === typeof usable) ||
"function" === typeof usable
) {
if ("function" === typeof usable.then) {
var index = thenableIndexCounter;
thenableIndexCounter += 1;
@@ -619,7 +622,7 @@ function createTask(request, model, context, abortSet) {
abortSet.add(task);
return task;
}
function serializeModuleReference(request, parent, key, moduleReference) {
function serializeClientReference(request, parent, key, moduleReference) {
var writtenModules = request.writtenModules,
existingId = writtenModules.get(moduleReference);
if (void 0 !== existingId)
@@ -810,7 +813,7 @@ function resolveModelToJSON(request, parent, key, value) {
if (null === value) return null;
if ("object" === typeof value) {
if (value instanceof JSResourceReferenceImpl)
return serializeModuleReference(request, parent, key, value);
return serializeClientReference(request, parent, key, value);
if (value.$$typeof === REACT_PROVIDER_TYPE)
return (
(value = value._context._globalName),
@@ -852,7 +855,7 @@ function resolveModelToJSON(request, parent, key, value) {
return value;
if ("function" === typeof value) {
if (value instanceof JSResourceReferenceImpl)
return serializeModuleReference(request, parent, key, value);
return serializeClientReference(request, parent, key, value);
if (/^on[A-Z]/.test(key))
throw Error(
"Event handlers cannot be passed to Client Component props." +
@@ -432,7 +432,10 @@ function useId() {
return ":" + currentRequest.identifierPrefix + "S" + id.toString(32) + ":";
}
function use(usable) {
if (null !== usable && "object" === typeof usable) {
if (
(null !== usable && "object" === typeof usable) ||
"function" === typeof usable
) {
if ("function" === typeof usable.then) {
var index = thenableIndexCounter;
thenableIndexCounter += 1;
@@ -621,7 +624,7 @@ function createTask(request, model, context, abortSet) {
abortSet.add(task);
return task;
}
function serializeModuleReference(request, parent, key, moduleReference) {
function serializeClientReference(request, parent, key, moduleReference) {
var writtenModules = request.writtenModules,
existingId = writtenModules.get(moduleReference);
if (void 0 !== existingId)
@@ -812,7 +815,7 @@ function resolveModelToJSON(request, parent, key, value) {
if (null === value) return null;
if ("object" === typeof value) {
if (value instanceof JSResourceReferenceImpl)
return serializeModuleReference(request, parent, key, value);
return serializeClientReference(request, parent, key, value);
if (value.$$typeof === REACT_PROVIDER_TYPE)
return (
(value = value._context._globalName),
@@ -854,7 +857,7 @@ function resolveModelToJSON(request, parent, key, value) {
return value;
if ("function" === typeof value) {
if (value instanceof JSResourceReferenceImpl)
return serializeModuleReference(request, parent, key, value);
return serializeClientReference(request, parent, key, value);
if (/^on[A-Z]/.test(key))
throw Error(
"Event handlers cannot be passed to Client Component props." +
+2 -2
View File
@@ -74,7 +74,7 @@ var enableProfilerNestedUpdateScheduledHook =
var enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler; // Note: we'll want to remove this when we to userland implementation.
var REACT_MODULE_REFERENCE = Symbol.for("react.module.reference");
var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
function isValidElementType(type) {
if (typeof type === "string" || typeof type === "function") {
return true;
@@ -106,7 +106,7 @@ function isValidElementType(type) {
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
type.$$typeof === REACT_MODULE_REFERENCE ||
type.$$typeof === REACT_CLIENT_REFERENCE ||
type.getModuleId !== undefined
) {
return true;
+2 -2
View File
@@ -74,7 +74,7 @@ var enableProfilerNestedUpdateScheduledHook =
var enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler; // Note: we'll want to remove this when we to userland implementation.
var REACT_MODULE_REFERENCE = Symbol.for("react.module.reference");
var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
function isValidElementType(type) {
if (typeof type === "string" || typeof type === "function") {
return true;
@@ -106,7 +106,7 @@ function isValidElementType(type) {
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
type.$$typeof === REACT_MODULE_REFERENCE ||
type.$$typeof === REACT_CLIENT_REFERENCE ||
type.getModuleId !== undefined
) {
return true;
@@ -33,7 +33,7 @@ var REACT_ELEMENT_TYPE = Symbol.for("react.element"),
dynamicFeatureFlags = require("ReactFeatureFlags"),
enableDebugTracing = dynamicFeatureFlags.enableDebugTracing,
enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
REACT_MODULE_REFERENCE = Symbol.for("react.module.reference");
REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
function typeOf(object) {
if ("object" === typeof object && null !== object) {
var $$typeof = object.$$typeof;
@@ -143,7 +143,7 @@ exports.isValidElementType = function(type) {
type.$$typeof === REACT_PROVIDER_TYPE ||
type.$$typeof === REACT_CONTEXT_TYPE ||
type.$$typeof === REACT_FORWARD_REF_TYPE ||
type.$$typeof === REACT_MODULE_REFERENCE ||
type.$$typeof === REACT_CLIENT_REFERENCE ||
void 0 !== type.getModuleId))
? !0
: !1;
+2 -2
View File
@@ -33,7 +33,7 @@ var REACT_ELEMENT_TYPE = Symbol.for("react.element"),
dynamicFeatureFlags = require("ReactFeatureFlags"),
enableDebugTracing = dynamicFeatureFlags.enableDebugTracing,
enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
REACT_MODULE_REFERENCE = Symbol.for("react.module.reference");
REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
function typeOf(object) {
if ("object" === typeof object && null !== object) {
var $$typeof = object.$$typeof;
@@ -143,7 +143,7 @@ exports.isValidElementType = function(type) {
type.$$typeof === REACT_PROVIDER_TYPE ||
type.$$typeof === REACT_CONTEXT_TYPE ||
type.$$typeof === REACT_FORWARD_REF_TYPE ||
type.$$typeof === REACT_MODULE_REFERENCE ||
type.$$typeof === REACT_CLIENT_REFERENCE ||
void 0 !== type.getModuleId))
? !0
: !1;
@@ -23882,7 +23882,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-classic-78c4bec20-20230127";
var ReactVersion = "18.3.0-www-classic-ce09ace9a-20230127";
// Might add PROFILE later.
@@ -23882,7 +23882,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-modern-78c4bec20-20230127";
var ReactVersion = "18.3.0-www-modern-ce09ace9a-20230127";
// Might add PROFILE later.
+2
View File
@@ -99,6 +99,7 @@
"Cannot find single active touch."
"Cannot hydrate Suspense in legacy mode. Switch from ReactDOM.hydrate(element, container) to ReactDOMClient.hydrateRoot(container, <App />).render(element) or remove the Suspense components from the server rendered components."
"Cannot infer the option value of complex children. Pass a `value` prop or use a plain string as children to <option>."
"Cannot read a Client Context from a Server Component."
"Cannot record touch end without a touch start.\nTouch End: %s\nTouch Bank: %s"
"Cannot record touch move without a touch start.\nTouch Move: %s\nTouch Bank: %s"
"Cannot render <%s> outside the main document. Try moving it into the root <head> tag."
@@ -112,6 +113,7 @@
"Cannot render a sync or defer <script> outside the main document without knowing its order. Try adding async=\"\" or moving it into the root <head> tag."
"Cannot update a component (`%s`) while rendering a different component (`%s`). To locate the bad setState() call inside `%s`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render"
"Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state."
"Cannot use() an already resolved Client Reference."
"Changing the name of a tracing marker after mount is not supported. To remount the tracing marker, pass it a new key."
"Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?"
"Component \"%s\" contains the string ref \"%s\". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref"