Hi @misty bobcat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#How can I use typescript 5.2's new await using syntax in nextjs
silent anvilBOT
Based on the knowledge sources provided, there isn't specific information about using TypeScript 5.2's new await using syntax in Next.js. However, there are some general guidelines and potential issues you might encounter when using TypeScript with Next.js.
Firstly, to use an async Server Component with TypeScript in Next.js, you need to ensure you are using TypeScript 5.1.3 or higher and @types/react 18.2.8 or higher. If you are using an older version of TypeScript, you may see a 'Promise<Element>' is not a valid JSX element type error. Updating to the latest version of TypeScript and @types/react should resolve this issue source (https://nextjs.org/docs/app/building-your-application/configuring/typescript#async-server-component-typescript-error).
Secondly, since Next.js 13.4.5, webpack has top-level await support enabled by default. Top-level await works with TypeScript if you add target: &quot;ES2017&quot; to the tsconfig.json. After #64508 lands it'll automatically write target: &quot;ES2017&quot; whenever target is not specified. This is set as suggested so it won't update existing target values source (https://github.com/vercel/next.js/issues/43382).
However, the error you're encountering seems to be related to the await using syntax, which is not specifically addressed in the provided knowledge sources. It's possible that this feature is not yet fully supported or there might be some configuration issues.