diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js index 06e00441c3b8e..7b5ac4d873b36 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.js +++ b/packages/react-reconciler/src/ReactFiberHooks.js @@ -473,10 +473,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}>`, ); } } diff --git a/packages/react-reconciler/src/ReactFiberThenable.js b/packages/react-reconciler/src/ReactFiberThenable.js index 88d32dc530790..d0d8ad84ee811 100644 --- a/packages/react-reconciler/src/ReactFiberThenable.js +++ b/packages/react-reconciler/src/ReactFiberThenable.js @@ -194,8 +194,9 @@ export function trackUsedThenable( // 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.', ); diff --git a/packages/react-reconciler/src/__tests__/ReactUse-test.js b/packages/react-reconciler/src/__tests__/ReactUse-test.js index a120d6f250c9e..fbe247c029a50 100644 --- a/packages/react-reconciler/src/__tests__/ReactUse-test.js +++ b/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. ' + + ' 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. ' + + ' 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. ' + + ' 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. ' + + ' 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. ' + + ' 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. ' + + ' 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. ' + + ' 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 **)', diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json index f001b660bd2aa..64713355282ac 100644 --- a/scripts/error-codes/codes.json +++ b/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.",