#Unhandled Runtime Error Error

1 messages · Page 1 of 1 (latest)

uncut rain
#

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.

Call Stack React trackUsedThenable node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (9157:1) unwrapThenable node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (9346:1) reconcileChildFibersImpl node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (10540:1) reconcileChildFibers node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (10573:1) reconcileChildren node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (15802:1) updateFunctionComponent node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (16310:1) mountLazyComponent dom.development.js (25748:1) workLoopSync node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25464:1) renderRootSync node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25419:1) recoverFromConcurrentError node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24597:1) performSyncWorkOnRoot node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24899:1) flushSyncWorkAcrossRoots_impl node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (7758:1) flushSyncWorkOnAllRoots node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (7718:1) processRootScheduleInMicrotask node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (7863:1) eval node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (8034:1)

azure quarryBOT
#

Hi @uncut rain. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The error you're encountering, "Unhandled Runtime Error: async/await is not yet supported in Client Components, only Server Components," typically occurs when an async function is used within a client component. This is not supported in Next.js as of now.

Based on the information from the knowledge sources, here are the steps to resolve this issue:

  1. Identify the Client Component with async Function:

    • Check your client components for any async functions. In the provided example, the TechIcon component was mistakenly made async.

  2. Remove the async Keyword:

    • Ensure that no async functions are used within client components. For instance, in the TechIcon component, you should remove the async keyword.

Here is an example from the knowledge sources:

// Incorrect usage in a client component
export const TechIcon: React.FC<TechIconProps> = async ({
  icon: { default: Icon },
  name,
}) => {
  return (
    <div className="flex flex-col gap-3 items-center">
      <Icon className="h-10 w-auto" />
      <span className="text-sm">{name}</span>
    </div>
  );
};

// Corrected usage
export const TechIcon: React.FC<TechIconProps> = ({
  icon: { default: Icon },
  name,
}) => {
  return (
    <div className="flex flex-col gap-3 items-center">
      <Icon className="h-10 w-auto" />
      <span className="text-sm">{name}</span>
    </div>
  );
};
  1. Verify the Changes:
    • After making the necessary changes, run your application again to ensure the error is resolved.

For more details, you can refer to the original issue and comments on GitHub:

#

If you need to monitor client errors, consider using a service like Sentry (https://github.com/vercel/next.js/tree/canary/examples/with-sentry), Bugsnag, or Datadog as mentioned in the Next.js documentation (https://nextjs.org/docs/pages/building-your-application/configuring/error-handling#reporting-errors).

By following these steps, you should be able to resolve the "Unhandled Runtime Error: async/await is not yet supported in Client Components" error in your Next.js application.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: