Include component name in "async/await is not supported" error message if available (#32435)

Author: eps1lon

packages/react-reconciler/src/ReactFiberHooks.js

@@ -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}>`,
         );
       }
     }

packages/react-reconciler/src/ReactFiberThenable.js

@@ -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.',
           );

packages/react-reconciler/src/__tests__/ReactUse-test.js

@@ -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 **)',
@@ -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 **)',
@@ -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.',
     );
@@ -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.',
     );
@@ -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 **)',
@@ -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 **)',
@@ -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 **)',

scripts/error-codes/codes.json

@@ -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.",