Include component name in "async/await is not supported" error message if available (#32435)
Sebastian "Sebbie" Silbermann committed
Feb 25, 2025 at 10:48 UTC
22e39ea72e9d10f6634ea580aaba49c2e759ef0e
4 files changed
+41
-24
packages/react-reconciler/src/ReactFiberHooks.js
+5
-2
@@ -475,10 +475,13 @@ function warnIfAsyncClientComponent(Component: Function) {
475
if (!didWarnAboutAsyncClientComponent.has(componentName)) {
476
didWarnAboutAsyncClientComponent.add(componentName);
477
console.error(
478
- 'async/await is not yet supported in Client Components, only ' +
479
- 'Server Components. This error is often caused by accidentally ' +
478
+ '%s is an async Client Component. ' +
479
+ 'Only Server Components can be async at the moment. This error is often caused by accidentally ' +
480
"adding `'use client'` to a module that was originally written " +
481
'for the server.',
482
+ componentName === null
483
+ ? 'An unknown Component'
484
+ : `<${componentName}>`,
485
);
486
}
487
}
packages/react-reconciler/src/ReactFiberThenable.js
+3
-2
@@ -194,8 +194,9 @@ export function trackUsedThenable<T>(
194
// this case include forcing a concurrent render, or putting the whole
195
// root into offscreen mode.
196
throw new Error(
197
- 'async/await is not yet supported in Client Components, only ' +
198
- 'Server Components. This error is often caused by accidentally ' +
197
+ 'An unknown Component is an async Client Component. ' +
198
+ 'Only Server Components can be async at the moment. ' +
199
+ 'This error is often caused by accidentally ' +
200
"adding `'use client'` to a module that was originally written " +
201
'for the server.',
202
);
packages/react-reconciler/src/__tests__/ReactUse-test.js
+32
-19
@@ -1343,7 +1343,8 @@ describe('ReactUse', () => {
1343
});
1344
assertLog(['Async text requested [Hi]']);
1345
assertConsoleErrorDev([
1346
- 'async/await is not yet supported in Client Components, only Server Components. ' +
1346
+ '<App> is an async Client Component. ' +
1347
+ 'Only Server Components can be async at the moment. ' +
1348
"This error is often caused by accidentally adding `'use client'` " +
1349
'to a module that was originally written for the server.\n' +
1350
' in App (at **)',
@@ -1443,7 +1444,8 @@ describe('ReactUse', () => {
1444
});
1445
assertLog(['A', 'Mount: A']);
1446
assertConsoleErrorDev([
1446
- 'async/await is not yet supported in Client Components, only Server Components. ' +
1447
+ '<App> is an async Client Component. ' +
1448
+ 'Only Server Components can be async at the moment. ' +
1449
"This error is often caused by accidentally adding `'use client'` " +
1450
'to a module that was originally written for the server.\n' +
1451
' in App (at **)',
@@ -1915,25 +1917,29 @@ describe('ReactUse', () => {
1917
);
1918
});
1919
assertConsoleErrorDev([
1918
- 'async/await is not yet supported in Client Components, only Server Components. ' +
1920
+ '<AsyncClientComponent> is an async Client Component. ' +
1921
+ 'Only Server Components can be async at the moment. ' +
1922
"This error is often caused by accidentally adding `'use client'` " +
1923
'to a module that was originally written for the server.\n' +
1924
' in AsyncClientComponent (at **)' +
1925
(gate('enableOwnerStacks') ? '' : '\n in ErrorBoundary (at **)'),
1926
]);
1927
assertLog([
1925
- 'async/await is not yet supported in Client Components, only Server ' +
1926
- 'Components. This error is often caused by accidentally adding ' +
1928
+ 'An unknown Component is an async Client Component. ' +
1929
+ 'Only Server Components can be async at the moment. ' +
1930
+ 'This error is often caused by accidentally adding ' +
1931
"`'use client'` to a module that was originally written for " +
1932
'the server.',
1929
- 'async/await is not yet supported in Client Components, only Server ' +
1930
- 'Components. This error is often caused by accidentally adding ' +
1933
+ 'An unknown Component is an async Client Component. ' +
1934
+ 'Only Server Components can be async at the moment. ' +
1935
+ 'This error is often caused by accidentally adding ' +
1936
"`'use client'` to a module that was originally written for " +
1937
'the server.',
1938
]);
1939
expect(root).toMatchRenderedOutput(
1935
- 'async/await is not yet supported in Client Components, only Server ' +
1936
- 'Components. This error is often caused by accidentally adding ' +
1940
+ 'An unknown Component is an async Client Component. ' +
1941
+ 'Only Server Components can be async at the moment. ' +
1942
+ 'This error is often caused by accidentally adding ' +
1943
"`'use client'` to a module that was originally written for " +
1944
'the server.',
1945
);
@@ -1967,25 +1973,29 @@ describe('ReactUse', () => {
1973
);
1974
});
1975
assertConsoleErrorDev([
1970
- 'async/await is not yet supported in Client Components, only Server Components. ' +
1976
+ '<AsyncClientComponent> is an async Client Component. ' +
1977
+ 'Only Server Components can be async at the moment. ' +
1978
"This error is often caused by accidentally adding `'use client'` " +
1979
'to a module that was originally written for the server.\n' +
1980
' in AsyncClientComponent (at **)' +
1981
(gate('enableOwnerStacks') ? '' : '\n in ErrorBoundary (at **)'),
1982
]);
1983
assertLog([
1977
- 'async/await is not yet supported in Client Components, only Server ' +
1978
- 'Components. This error is often caused by accidentally adding ' +
1984
+ 'An unknown Component is an async Client Component. ' +
1985
+ 'Only Server Components can be async at the moment. ' +
1986
+ 'This error is often caused by accidentally adding ' +
1987
"`'use client'` to a module that was originally written for " +
1988
'the server.',
1981
- 'async/await is not yet supported in Client Components, only Server ' +
1982
- 'Components. This error is often caused by accidentally adding ' +
1989
+ 'An unknown Component is an async Client Component. ' +
1990
+ 'Only Server Components can be async at the moment. ' +
1991
+ 'This error is often caused by accidentally adding ' +
1992
"`'use client'` to a module that was originally written for " +
1993
'the server.',
1994
]);
1995
expect(root).toMatchRenderedOutput(
1987
- 'async/await is not yet supported in Client Components, only Server ' +
1988
- 'Components. This error is often caused by accidentally adding ' +
1996
+ 'An unknown Component is an async Client Component. ' +
1997
+ 'Only Server Components can be async at the moment. ' +
1998
+ 'This error is often caused by accidentally adding ' +
1999
"`'use client'` to a module that was originally written for " +
2000
'the server.',
2001
);
@@ -2012,7 +2022,8 @@ describe('ReactUse', () => {
2022
// decided to warn for _any_ async client component regardless of
2023
// whether the update is sync. But if we ever add back support for async
2024
// client components, we should add back the hook warning.
2015
- 'async/await is not yet supported in Client Components, only Server Components. ' +
2025
+ '<AsyncClientComponent> is an async Client Component. ' +
2026
+ 'Only Server Components can be async at the moment. ' +
2027
"This error is often caused by accidentally adding `'use client'` " +
2028
'to a module that was originally written for the server.\n' +
2029
' in AsyncClientComponent (at **)',
@@ -2044,7 +2055,8 @@ describe('ReactUse', () => {
2055
// decided to warn for _any_ async client component regardless of
2056
// whether the update is sync. But if we ever add back support for async
2057
// client components, we should add back the hook warning.
2047
- 'async/await is not yet supported in Client Components, only Server Components. ' +
2058
+ '<AsyncClientComponent> is an async Client Component. ' +
2059
+ 'Only Server Components can be async at the moment. ' +
2060
"This error is often caused by accidentally adding `'use client'` " +
2061
'to a module that was originally written for the server.\n' +
2062
' in AsyncClientComponent (at **)',
@@ -2079,7 +2091,8 @@ describe('ReactUse', () => {
2091
});
2092
});
2093
assertConsoleErrorDev([
2082
- 'async/await is not yet supported in Client Components, only Server Components. ' +
2094
+ '<App> is an async Client Component. ' +
2095
+ 'Only Server Components can be async at the moment. ' +
2096
"This error is often caused by accidentally adding `'use client'` " +
2097
'to a module that was originally written for the server.\n' +
2098
' in App (at **)',
scripts/error-codes/codes.json
+1
-1
@@ -467,7 +467,7 @@
467
"479": "Cannot update optimistic state while rendering.",
468
"480": "File/Blob fields are not yet supported in progressive forms. Will fallback to client hydration.",
469
"481": "Tried to encode a Server Action from a different instance than the encoder is from. This is a bug in React.",
470
- "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.",
470
+ "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.",
471
"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.",
472
"484": "A Server Component was postponed. The reason is omitted in production builds to avoid leaking sensitive details.",
473
"485": "Cannot update form state while rendering.",