Skip to content

Commit

Permalink
Include component name in "async/await is not supported" error messag…
Browse files Browse the repository at this point in the history 
…e if available (#32435)
  • Loading branch information
@eps1lon
eps1lon authored Feb 25, 2025
1 parent 2567726 commit 22e39ea
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 24 deletions.
7 changes: 5 additions & 2 deletions packages/react-reconciler/src/ReactFiberHooks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -475,10 +475,13 @@ function warnIfAsyncClientComponent(Component: Function) {
if (!didWarnAboutAsyncClientComponent.has(componentName)) {
didWarnAboutAsyncClientComponent.add(componentName);
console.error(
'async/await is not yet supported in Client Components, only ' +
'Server Components. This error is often caused by accidentally ' +
'%s is an async Client Component. ' +
'Only Server Components can be async at the moment. This error is often caused by accidentally ' +
"adding `'use client'` to a module that was originally written " +
'for the server.',
componentName === null
? 'An unknown Component'
: `<${componentName}>`,
);
}
}
Expand Down
5 changes: 3 additions & 2 deletions packages/react-reconciler/src/ReactFiberThenable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,8 +194,9 @@ export function trackUsedThenable<T>(
// this case include forcing a concurrent render, or putting the whole
// root into offscreen mode.
throw new Error(
'async/await is not yet supported in Client Components, only ' +
'Server Components. This error is often caused by accidentally ' +
'An unknown Component is an async Client Component. ' +
'Only Server Components can be async at the moment. ' +
'This error is often caused by accidentally ' +
"adding `'use client'` to a module that was originally written " +
'for the server.',
);
Expand Down
51 changes: 32 additions & 19 deletions packages/react-reconciler/src/__tests__/ReactUse-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1343,7 +1343,8 @@ describe('ReactUse', () => {
});
assertLog(['Async text requested [Hi]']);
assertConsoleErrorDev([
'async/await is not yet supported in Client Components, only Server Components. ' +
'<App> is an async Client Component. ' +
'Only Server Components can be async at the moment. ' +
"This error is often caused by accidentally adding `'use client'` " +
'to a module that was originally written for the server.\n' +
' in App (at **)',
Expand Down Expand Up @@ -1443,7 +1444,8 @@ describe('ReactUse', () => {
});
assertLog(['A', 'Mount: A']);
assertConsoleErrorDev([
'async/await is not yet supported in Client Components, only Server Components. ' +
'<App> is an async Client Component. ' +
'Only Server Components can be async at the moment. ' +
"This error is often caused by accidentally adding `'use client'` " +
'to a module that was originally written for the server.\n' +
' in App (at **)',
Expand Down Expand Up @@ -1915,25 +1917,29 @@ describe('ReactUse', () => {
);
});
assertConsoleErrorDev([
'async/await is not yet supported in Client Components, only Server Components. ' +
'<AsyncClientComponent> is an async Client Component. ' +
'Only Server Components can be async at the moment. ' +
"This error is often caused by accidentally adding `'use client'` " +
'to a module that was originally written for the server.\n' +
' in AsyncClientComponent (at **)' +
(gate('enableOwnerStacks') ? '' : '\n in ErrorBoundary (at **)'),
]);
assertLog([
'async/await is not yet supported in Client Components, only Server ' +
'Components. This error is often caused by accidentally adding ' +
'An unknown Component is an async Client Component. ' +
'Only Server Components can be async at the moment. ' +
'This error is often caused by accidentally adding ' +
"`'use client'` to a module that was originally written for " +
'the server.',
'async/await is not yet supported in Client Components, only Server ' +
'Components. This error is often caused by accidentally adding ' +
'An unknown Component is an async Client Component. ' +
'Only Server Components can be async at the moment. ' +
'This error is often caused by accidentally adding ' +
"`'use client'` to a module that was originally written for " +
'the server.',
]);
expect(root).toMatchRenderedOutput(
'async/await is not yet supported in Client Components, only Server ' +
'Components. This error is often caused by accidentally adding ' +
'An unknown Component is an async Client Component. ' +
'Only Server Components can be async at the moment. ' +
'This error is often caused by accidentally adding ' +
"`'use client'` to a module that was originally written for " +
'the server.',
);
Expand Down Expand Up @@ -1967,25 +1973,29 @@ describe('ReactUse', () => {
);
});
assertConsoleErrorDev([
'async/await is not yet supported in Client Components, only Server Components. ' +
'<AsyncClientComponent> is an async Client Component. ' +
'Only Server Components can be async at the moment. ' +
"This error is often caused by accidentally adding `'use client'` " +
'to a module that was originally written for the server.\n' +
' in AsyncClientComponent (at **)' +
(gate('enableOwnerStacks') ? '' : '\n in ErrorBoundary (at **)'),
]);
assertLog([
'async/await is not yet supported in Client Components, only Server ' +
'Components. This error is often caused by accidentally adding ' +
'An unknown Component is an async Client Component. ' +
'Only Server Components can be async at the moment. ' +
'This error is often caused by accidentally adding ' +
"`'use client'` to a module that was originally written for " +
'the server.',
'async/await is not yet supported in Client Components, only Server ' +
'Components. This error is often caused by accidentally adding ' +
'An unknown Component is an async Client Component. ' +
'Only Server Components can be async at the moment. ' +
'This error is often caused by accidentally adding ' +
"`'use client'` to a module that was originally written for " +
'the server.',
]);
expect(root).toMatchRenderedOutput(
'async/await is not yet supported in Client Components, only Server ' +
'Components. This error is often caused by accidentally adding ' +
'An unknown Component is an async Client Component. ' +
'Only Server Components can be async at the moment. ' +
'This error is often caused by accidentally adding ' +
"`'use client'` to a module that was originally written for " +
'the server.',
);
Expand All @@ -2012,7 +2022,8 @@ describe('ReactUse', () => {
// decided to warn for _any_ async client component regardless of
// whether the update is sync. But if we ever add back support for async
// client components, we should add back the hook warning.
'async/await is not yet supported in Client Components, only Server Components. ' +
'<AsyncClientComponent> is an async Client Component. ' +
'Only Server Components can be async at the moment. ' +
"This error is often caused by accidentally adding `'use client'` " +
'to a module that was originally written for the server.\n' +
' in AsyncClientComponent (at **)',
Expand Down Expand Up @@ -2044,7 +2055,8 @@ describe('ReactUse', () => {
// decided to warn for _any_ async client component regardless of
// whether the update is sync. But if we ever add back support for async
// client components, we should add back the hook warning.
'async/await is not yet supported in Client Components, only Server Components. ' +
'<AsyncClientComponent> is an async Client Component. ' +
'Only Server Components can be async at the moment. ' +
"This error is often caused by accidentally adding `'use client'` " +
'to a module that was originally written for the server.\n' +
' in AsyncClientComponent (at **)',
Expand Down Expand Up @@ -2079,7 +2091,8 @@ describe('ReactUse', () => {
});
});
assertConsoleErrorDev([
'async/await is not yet supported in Client Components, only Server Components. ' +
'<App> is an async Client Component. ' +
'Only Server Components can be async at the moment. ' +
"This error is often caused by accidentally adding `'use client'` " +
'to a module that was originally written for the server.\n' +
' in App (at **)',
Expand Down
2 changes: 1 addition & 1 deletion scripts/error-codes/codes.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -467,7 +467,7 @@
"479": "Cannot update optimistic state while rendering.",
"480": "File/Blob fields are not yet supported in progressive forms. Will fallback to client hydration.",
"481": "Tried to encode a Server Action from a different instance than the encoder is from. This is a bug in React.",
"482": "async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.",
"482": "An unknown Component is an async Client Component. Only Server Components can be async at the moment. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.",
"483": "Hooks are not supported inside an async component. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.",
"484": "A Server Component was postponed. The reason is omitted in production builds to avoid leaking sensitive details.",
"485": "Cannot update form state while rendering.",
Expand Down

0 comments on commit 22e39ea

Please sign in to comment.