Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.

[step2341]

Summary

On upgrade to 14.2.2 from 14.1.x im now receiving this warning:

app-index.js:33 Warning: A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.
at AuthProvider
at f (webpack-internal:///(app-pages-browser)/./node_modules/next-themes/dist/index.module.js:8:597)
at $ (webpack-internal:///(app-pages-browser)/./node_modules/next-themes/dist/index.module.js:8:348)
at ThemeProvider (webpack-internal:///(app-pages-browser)/./src/components/theme/theme-provider.tsx:13:11)
at body
at html
at RootLayout (Server)

Is there a change I need to make now?

Additional information

No response

Example

No response

[beardsleym]

Anyone have any insight. I've been battling with this warning all throughout my apps.

[tarek-mo]

@kosl90 ur reply saved my day :)

[JannikZed]

My client components are not async, I'm just trying to call a server action in a useEffect, same as in the docs and it is not working. Getting these errors all the time..and when removing suspense boundaries around them I get: Error: async/await is not yet supported in Client Components.. so weird

[robiulhr]

maybe you use 'use client' and async FC together, I did it when I transformed a server component into a client component 😂

the client component should not be asynchronous

This is the answer. thanks.

[Nzanzu-Lwanzo]

Man, you saved my life !

[gru-lucy]

maybe you use 'use client' and async FC together, I did it when I transformed a server component into a client component 😂

the client component should not be asynchronous

Really helpful, thanks very much!

[hasan-mohammad-bd]

This may solve your issue by using dynamic import

Example Code:

'use client'

import { useState } from 'react'
import dynamic from 'next/dynamic'

// Client Components:
const ComponentA = dynamic(() => import('../components/A'))
const ComponentB = dynamic(() => import('../components/B'))
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })

export default function ClientComponentExample() {
  const [showMore, setShowMore] = useState(false)

  return (
    <div>
      {/* Load immediately, but in a separate client bundle */}
      <ComponentA />

      {/* Load on demand, only when/if the condition is met */}
      {showMore && <ComponentB />}
      <button onClick={() => setShowMore(!showMore)}>Toggle</button>

      {/* Load only on the client side */}
      <ComponentC />
    </div>
  )
}

[arudenkoofficial]

Summary

On upgrade to 14.2.2 from 14.1.x im now receiving this warning:

app-index.js:33 Warning: A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework. at AuthProvider at f (webpack-internal:///(app-pages-browser)/./node_modules/next-themes/dist/index.module.js:8:597) at $ (webpack-internal:///(app-pages-browser)/./node_modules/next-themes/dist/index.module.js:8:348) at ThemeProvider (webpack-internal:///(app-pages-browser)/./src/components/theme/theme-provider.tsx:13:11) at body at html at RootLayout (Server)

Is there a change I need to make now?

Additional information

No response

Example

No response

You need to check your AuthProvider component. Seems that the problem is in it – it creates a promise that restarts on every render.

Actually, the text of the error hints at that. The promise must be kept in a location external to the suspended component.
Consider storing it in a parent component or a module-level container

[beardsleym]

Our issue was with SWR. I swapped the library to Tanstack Query and the warnings have disappeared.

[benjamintd]

I am getting this issue after creating a loading.ts file along side a route that used to work fine prior. The error is not pointing to a specific component, which doesn't help.

[abdllyv]

This error occurs when you try to use Server-Side Rendering (SSR) within a Client Component in frameworks like Next.js
import HotelCardPrimary from "@/components/general-components/hotelCardPrimary"; This method is not suitable.

import dynamic from "next/dynamic";
const HotelCardPrimary = dynamic(
() => import("../components/general-components/hotelCardPrimary"),
{
ssr: false,
}
);
In this way, if the component created for server side rendering is like this, when it is necessary to render the client side, the problem is solved by making the server component a client in this way so that it does not cause problems.

[jcyinnovations]

For anyone still having this problem, I was able to resolve it by wrapping the offending component in React Suspense:

   <Suspense fallback={<CardSkeleton/>}>
     <ScanCard status=""/>
   </Suspense>