Improve Error Messages when Access Client References#26059
Merged
sebmarkbage merged 4 commits intofacebook:mainfrom Jan 28, 2023
Merged
Improve Error Messages when Access Client References#26059sebmarkbage merged 4 commits intofacebook:mainfrom
sebmarkbage merged 4 commits intofacebook:mainfrom
Conversation
This lets us throw better errors when they're used as a function.
This isn't quite right if this is a Context or otherwise but we could change the async flag on module references to use the use() unwrapping instead. Give a better error for passing a client reference to useContext.
gnoff
approved these changes
Jan 28, 2023
| 'throw new Error(' + | ||
| JSON.stringify( | ||
| `Attempted to call ${name}() from the server but ${name} is on the client. ` + | ||
| `It's not possible to invoke a client function from the server, it can ` + |
Collaborator
There was a problem hiding this comment.
nit: "from the server" is ambiguous since SSR is on the server and the function can be called there. Can we make this error message reinforce the terminology that more clearly delineates between RSC and SSR/Client instead of server vs client?
Contributor
Author
There was a problem hiding this comment.
Yea we probably need to think through our messaging here. Right now it's that SSR is an "emulated client" and not a server.
github-actions bot
pushed a commit
that referenced
this pull request
Jan 28, 2023
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 [ce09ace](ce09ace) [View git log for this commit](https://github.com/facebook/react/commits/ce09ace9a23b61dfba53f5a83d52b377bc642bae)
facebook-github-bot
pushed a commit
to facebook/react-native
that referenced
this pull request
Jan 31, 2023
Summary: This sync includes the following changes: - **[48b687f](facebook/react@48b687fc9 )**: [trusted types][www] Add enableTrustedTypesIntegration flag back in ([#26016](facebook/react#26016)) //<an onion>// - **[9b1423c](facebook/react@9b1423cc0 )**: Revert "Hold host functions in var" ([#26079](facebook/react#26079)) //<Samuel Susla>// - **[ce09ace](facebook/react@ce09ace9a )**: Improve Error Messages when Access Client References ([#26059](facebook/react#26059)) //<Sebastian Markbåge>// - **[0652bdb](facebook/react@0652bdbd1 )**: Add flow types to Maps in ReactNativeViewConfigRegistry.js ([#26064](facebook/react#26064)) //<Samuel Susla>// - **[ee85098](facebook/react@ee8509801 )**: [cleanup] remove deletedTreeCleanUpLevel feature flag ([#25529](facebook/react#25529)) //<Jan Kassens>// - **[0e31dd0](facebook/react@0e31dd028 )**: Remove findDOMNode www shim ([#25998](facebook/react#25998)) //<Jan Kassens>// - **[379dd74](facebook/react@379dd741e )**: [www] set enableTrustedTypesIntegration to false ([#25997](facebook/react#25997)) //<Jan Kassens>// - **[555ece0](facebook/react@555ece0cd )**: Don't warn about concurrently rendering contexts if we finished rendering ([#22797](facebook/react#22797)) //<Sebastian Silbermann>// - **[0fce6bb](facebook/react@0fce6bb49 )**: [cleanup] remove feature flags warnAboutDefaultPropsOnFunctionComponents and warnAboutStringRefs ([#25980](facebook/react#25980)) //<Jan Kassens>// - **[7002a67](facebook/react@7002a6743 )**: [cleanup] remove unused values from ReactFeatureFlags.www-dynamic ([#25575](facebook/react#25575)) //<Jan Kassens>// - **[a48e54f](facebook/react@a48e54f2b )**: [cleanup] remove old feature flag warnAboutDeprecatedLifecycles ([#25978](facebook/react#25978)) //<Jan Kassens>// - **[0f4a835](facebook/react@0f4a83596 )**: Remove duplicate JSResourceReferenceImpl mock ([#25976](facebook/react#25976)) //<Jan Kassens>// - **[c491316](facebook/react@c49131669 )**: Remove unused Flow suppressions ([#25977](facebook/react#25977)) //<Jan Kassens>// - **[afe6521e1](facebook/react@afe6521e1 )**: Refactor: remove useless parameter ([#25923](facebook/react#25923)) //<Chris>// - **[34464fb](facebook/react@34464fb16 )**: Upgrade to Flow 0.196.3 ([#25974](facebook/react#25974)) //<Jan Kassens>// - **[e2424f3](facebook/react@e2424f33b )**: [flow] enable exact_empty_objects ([#25973](facebook/react#25973)) //<Jan Kassens>// - **[0b4f443](facebook/react@0b4f44302 )**: [flow] enable enforce_local_inference_annotations ([#25921](facebook/react#25921)) //<Jan Kassens>// - **[0b97441](facebook/react@0b974418c )**: [Fizz] Fork Fizz instruction set for inline script and external runtime ([#25862](facebook/react#25862)) //<mofeiZ>// - **[5379b61](facebook/react@5379b6123 )**: Batch sync, default and continuous lanes ([#25700](facebook/react#25700)) //<Tianyu Yao>// - **[bbf4d22](facebook/react@bbf4d2211 )**: Update import for babel-code-frame in build script ([#25963](facebook/react#25963)) //<Ming Ye>// - **[b83baf6](facebook/react@b83baf63f )**: Transform updates to support Flow this annotation syntax ([#25918](facebook/react#25918)) //<Jan Kassens>// - **[c2d6552](facebook/react@c2d655207 )**: Unify `use` and `renderDidSuspendDelayIfPossible` implementations ([#25922](facebook/react#25922)) //<Andrew Clark>// - **[48274a4](facebook/react@48274a43a )**: Remove vestigial Suspense batching logic ([#25861](facebook/react#25861)) //<Andrew Clark>// - **[de7d1c9](facebook/react@de7d1c907 )**: Add `fetchPriority` to `<img>` and `<link>` ([#25927](facebook/react#25927)) //<Steven>// - **[81d4ee9](facebook/react@81d4ee9ca )**: reconciler docs: fix small typo - "mode" (instead of "node") ([#25863](facebook/react#25863)) //<satelllte>// - **[5fcf1a4](facebook/react@5fcf1a4b4 )**: Bugfix: Synchronous ping during render phase sometimes unwinds the stack, leading to crash ([#25851](facebook/react#25851)) //<Andrew Clark>// - **[2b1fb91](facebook/react@2b1fb91a5 )**: ESLint upgrade to use hermes-eslint ([#25915](facebook/react#25915)) //<Jan Kassens>// - **[fabef7a](facebook/react@fabef7a6b )**: Resubmit Add HydrationSyncLane ([#25878](facebook/react#25878)) //<Tianyu Yao>// - **[7efa9e5](facebook/react@7efa9e597 )**: Fix unwinding context during selective hydration ([#25876](facebook/react#25876)) //<Tianyu Yao>// - **[84a0a17](facebook/react@84a0a171e )**: Rename experimental useEvent to useEffectEvent ([#25881](facebook/react#25881)) //<Sebastian Markbåge>// - **[4dda96a](facebook/react@4dda96a40 )**: [react-www] remove forked bundle ([#25866](facebook/react#25866)) //<Jan Kassens>// - **[9c09c1c](facebook/react@9c09c1cd6 )**: Revert "Fork ReactDOMSharedInternals for www ([#25791](facebook/react#25791))" ([#25864](facebook/react#25864)) //<lauren>// - **[996e4c0](facebook/react@996e4c0d5 )**: Offscreen add attach ([#25603](facebook/react#25603)) //<Samuel Susla>// - **[b14d7fa](facebook/react@b14d7fa4b )**: Add support for setNativeProps to Fabric ([#25737](facebook/react#25737)) //<Samuel Susla>// - **[8196872](facebook/react@819687279 )**: [Float] Fix typo in ReactDOMResourceValidation.js ([#25798](facebook/react#25798)) //<Ikko Ashimine>// - **[5dfc485](facebook/react@5dfc485f6 )**: fix tests for when float is off ([#25839](facebook/react#25839)) //<Josh Story>// - **[bfcbf33](facebook/react@bfcbf3306 )**: toString children of title ([#25838](facebook/react#25838)) //<Sebastian Markbåge>// - **[d4bc16a](facebook/react@d4bc16a7d )**: Revert "[react-www] remove forked bundle" ([#25837](facebook/react#25837)) //<Ricky>// - **[d69b2cf](facebook/react@d69b2cf82 )**: [bug fix] revert values in ReactFiberFlags to keep consistency for devtools ([#25832](facebook/react#25832)) //<Mengdi Chen>// - **[645ae26](facebook/react@645ae2686 )**: [react-www] remove forked bundle ([#25831](facebook/react#25831)) //<Jan Kassens>// - **[d807eb5](facebook/react@d807eb52c )**: Revert recent hydration changes ([#25812](facebook/react#25812)) //<Andrew Clark>// - **[2ccfa65](facebook/react@2ccfa657d )**: Fork ReactDOMSharedInternals for www ([#25791](facebook/react#25791)) //<lauren>// - **[f0534ae](facebook/react@f0534ae94 )**: Avoid replaying SelectiveHydrationException in dev ([#25754](facebook/react#25754)) //<Tianyu Yao>// - **[7fab379](facebook/react@7fab379d8 )**: fix link to ReactDOMHostconfig in reconciler docs ([#25788](facebook/react#25788)) //<Dmitry>// - **[500c8aa](facebook/react@500c8aa08 )**: Add component name to StrictMode error message ([#25718](facebook/react#25718)) //<Samuel Susla>// - **[353c302](facebook/react@353c30252 )**: Hold host functions in var ([#25741](facebook/react#25741)) //<Samuel Susla>// Changelog: [General][Changed] - React Native sync for revisions 17f6912...48b687f jest_e2e[run_all_tests] Reviewed By: rubennorte Differential Revision: D42855483 fbshipit-source-id: c244a595bb2d490a23b333c1b16d04a459ec94fc
Closed
1 task
huozhi
reviewed
Feb 4, 2023
| target.default = Object.defineProperties( | ||
| (function() { | ||
| throw new Error( | ||
| `Attempted to call the default export of ${moduleId} from the server` + |
Contributor
There was a problem hiding this comment.
Suggested change
| `Attempted to call the default export of ${moduleId} from the server` + | |
| `Attempted to call the default export of ${moduleId} from the server ` + |
| throw new Error( | ||
| `Attempted to call the default export of ${moduleId} from the server` + | ||
| `but it's on the client. It's not possible to invoke a client function from ` + | ||
| `the server, it can only be rendered as a Component or passed to props of a` + |
Contributor
There was a problem hiding this comment.
Suggested change
| `the server, it can only be rendered as a Component or passed to props of a` + | |
| `the server, it can only be rendered as a Component or passed to props of a ` + |
huozhi
added a commit
to vercel/next.js
that referenced
this pull request
Feb 7, 2023
x-ref: facebook/react#26059 x-ref: facebook/react#26083 x-ref: facebook/react#26093 x-ref: facebook/react#26083 Closes NEXT-445 * Remove extra `await` * Check if a component result is client reference, then we access for other exports
jankaifer
pushed a commit
to jankaifer/next.js
that referenced
this pull request
Feb 14, 2023
x-ref: facebook/react#26059 x-ref: facebook/react#26083 x-ref: facebook/react#26093 x-ref: facebook/react#26083 Closes NEXT-445 * Remove extra `await` * Check if a component result is client reference, then we access for other exports
OlimpiaZurek
pushed a commit
to OlimpiaZurek/react-native
that referenced
this pull request
May 22, 2023
Summary: This sync includes the following changes: - **[48b687f](facebook/react@48b687fc9 )**: [trusted types][www] Add enableTrustedTypesIntegration flag back in ([facebook#26016](facebook/react#26016)) //<an onion>// - **[9b1423c](facebook/react@9b1423cc0 )**: Revert "Hold host functions in var" ([facebook#26079](facebook/react#26079)) //<Samuel Susla>// - **[ce09ace](facebook/react@ce09ace9a )**: Improve Error Messages when Access Client References ([facebook#26059](facebook/react#26059)) //<Sebastian Markbåge>// - **[0652bdb](facebook/react@0652bdbd1 )**: Add flow types to Maps in ReactNativeViewConfigRegistry.js ([facebook#26064](facebook/react#26064)) //<Samuel Susla>// - **[ee85098](facebook/react@ee8509801 )**: [cleanup] remove deletedTreeCleanUpLevel feature flag ([facebook#25529](facebook/react#25529)) //<Jan Kassens>// - **[0e31dd0](facebook/react@0e31dd028 )**: Remove findDOMNode www shim ([facebook#25998](facebook/react#25998)) //<Jan Kassens>// - **[379dd74](facebook/react@379dd741e )**: [www] set enableTrustedTypesIntegration to false ([facebook#25997](facebook/react#25997)) //<Jan Kassens>// - **[555ece0](facebook/react@555ece0cd )**: Don't warn about concurrently rendering contexts if we finished rendering ([facebook#22797](facebook/react#22797)) //<Sebastian Silbermann>// - **[0fce6bb](facebook/react@0fce6bb49 )**: [cleanup] remove feature flags warnAboutDefaultPropsOnFunctionComponents and warnAboutStringRefs ([facebook#25980](facebook/react#25980)) //<Jan Kassens>// - **[7002a67](facebook/react@7002a6743 )**: [cleanup] remove unused values from ReactFeatureFlags.www-dynamic ([facebook#25575](facebook/react#25575)) //<Jan Kassens>// - **[a48e54f](facebook/react@a48e54f2b )**: [cleanup] remove old feature flag warnAboutDeprecatedLifecycles ([facebook#25978](facebook/react#25978)) //<Jan Kassens>// - **[0f4a835](facebook/react@0f4a83596 )**: Remove duplicate JSResourceReferenceImpl mock ([facebook#25976](facebook/react#25976)) //<Jan Kassens>// - **[c491316](facebook/react@c49131669 )**: Remove unused Flow suppressions ([facebook#25977](facebook/react#25977)) //<Jan Kassens>// - **[afe6521e1](facebook/react@afe6521e1 )**: Refactor: remove useless parameter ([facebook#25923](facebook/react#25923)) //<Chris>// - **[34464fb](facebook/react@34464fb16 )**: Upgrade to Flow 0.196.3 ([facebook#25974](facebook/react#25974)) //<Jan Kassens>// - **[e2424f3](facebook/react@e2424f33b )**: [flow] enable exact_empty_objects ([facebook#25973](facebook/react#25973)) //<Jan Kassens>// - **[0b4f443](facebook/react@0b4f44302 )**: [flow] enable enforce_local_inference_annotations ([facebook#25921](facebook/react#25921)) //<Jan Kassens>// - **[0b97441](facebook/react@0b974418c )**: [Fizz] Fork Fizz instruction set for inline script and external runtime ([facebook#25862](facebook/react#25862)) //<mofeiZ>// - **[5379b61](facebook/react@5379b6123 )**: Batch sync, default and continuous lanes ([facebook#25700](facebook/react#25700)) //<Tianyu Yao>// - **[bbf4d22](facebook/react@bbf4d2211 )**: Update import for babel-code-frame in build script ([facebook#25963](facebook/react#25963)) //<Ming Ye>// - **[b83baf6](facebook/react@b83baf63f )**: Transform updates to support Flow this annotation syntax ([facebook#25918](facebook/react#25918)) //<Jan Kassens>// - **[c2d6552](facebook/react@c2d655207 )**: Unify `use` and `renderDidSuspendDelayIfPossible` implementations ([facebook#25922](facebook/react#25922)) //<Andrew Clark>// - **[48274a4](facebook/react@48274a43a )**: Remove vestigial Suspense batching logic ([facebook#25861](facebook/react#25861)) //<Andrew Clark>// - **[de7d1c9](facebook/react@de7d1c907 )**: Add `fetchPriority` to `<img>` and `<link>` ([facebook#25927](facebook/react#25927)) //<Steven>// - **[81d4ee9](facebook/react@81d4ee9ca )**: reconciler docs: fix small typo - "mode" (instead of "node") ([facebook#25863](facebook/react#25863)) //<satelllte>// - **[5fcf1a4](facebook/react@5fcf1a4b4 )**: Bugfix: Synchronous ping during render phase sometimes unwinds the stack, leading to crash ([facebook#25851](facebook/react#25851)) //<Andrew Clark>// - **[2b1fb91](facebook/react@2b1fb91a5 )**: ESLint upgrade to use hermes-eslint ([facebook#25915](facebook/react#25915)) //<Jan Kassens>// - **[fabef7a](facebook/react@fabef7a6b )**: Resubmit Add HydrationSyncLane ([facebook#25878](facebook/react#25878)) //<Tianyu Yao>// - **[7efa9e5](facebook/react@7efa9e597 )**: Fix unwinding context during selective hydration ([facebook#25876](facebook/react#25876)) //<Tianyu Yao>// - **[84a0a17](facebook/react@84a0a171e )**: Rename experimental useEvent to useEffectEvent ([facebook#25881](facebook/react#25881)) //<Sebastian Markbåge>// - **[4dda96a](facebook/react@4dda96a40 )**: [react-www] remove forked bundle ([facebook#25866](facebook/react#25866)) //<Jan Kassens>// - **[9c09c1c](facebook/react@9c09c1cd6 )**: Revert "Fork ReactDOMSharedInternals for www ([facebook#25791](facebook/react#25791))" ([facebook#25864](facebook/react#25864)) //<lauren>// - **[996e4c0](facebook/react@996e4c0d5 )**: Offscreen add attach ([facebook#25603](facebook/react#25603)) //<Samuel Susla>// - **[b14d7fa](facebook/react@b14d7fa4b )**: Add support for setNativeProps to Fabric ([facebook#25737](facebook/react#25737)) //<Samuel Susla>// - **[8196872](facebook/react@819687279 )**: [Float] Fix typo in ReactDOMResourceValidation.js ([facebook#25798](facebook/react#25798)) //<Ikko Ashimine>// - **[5dfc485](facebook/react@5dfc485f6 )**: fix tests for when float is off ([facebook#25839](facebook/react#25839)) //<Josh Story>// - **[bfcbf33](facebook/react@bfcbf3306 )**: toString children of title ([facebook#25838](facebook/react#25838)) //<Sebastian Markbåge>// - **[d4bc16a](facebook/react@d4bc16a7d )**: Revert "[react-www] remove forked bundle" ([facebook#25837](facebook/react#25837)) //<Ricky>// - **[d69b2cf](facebook/react@d69b2cf82 )**: [bug fix] revert values in ReactFiberFlags to keep consistency for devtools ([facebook#25832](facebook/react#25832)) //<Mengdi Chen>// - **[645ae26](facebook/react@645ae2686 )**: [react-www] remove forked bundle ([facebook#25831](facebook/react#25831)) //<Jan Kassens>// - **[d807eb5](facebook/react@d807eb52c )**: Revert recent hydration changes ([facebook#25812](facebook/react#25812)) //<Andrew Clark>// - **[2ccfa65](facebook/react@2ccfa657d )**: Fork ReactDOMSharedInternals for www ([facebook#25791](facebook/react#25791)) //<lauren>// - **[f0534ae](facebook/react@f0534ae94 )**: Avoid replaying SelectiveHydrationException in dev ([facebook#25754](facebook/react#25754)) //<Tianyu Yao>// - **[7fab379](facebook/react@7fab379d8 )**: fix link to ReactDOMHostconfig in reconciler docs ([facebook#25788](facebook/react#25788)) //<Dmitry>// - **[500c8aa](facebook/react@500c8aa08 )**: Add component name to StrictMode error message ([facebook#25718](facebook/react#25718)) //<Samuel Susla>// - **[353c302](facebook/react@353c30252 )**: Hold host functions in var ([facebook#25741](facebook/react#25741)) //<Samuel Susla>// Changelog: [General][Changed] - React Native sync for revisions 17f6912...48b687f jest_e2e[run_all_tests] Reviewed By: rubennorte Differential Revision: D42855483 fbshipit-source-id: c244a595bb2d490a23b333c1b16d04a459ec94fc
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This renames Module References to Client References, since they are in the server->client direction.
I also changed the Proxies exposed from the
node-registerloader 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 @shudinguse(...)can now be used on a client reference to unwrap it server side and then pass a reference to the awaited value.