Next.js Discord

Discord Forum

Warning: A component was suspended by an uncached promise

Answered
Billy posted this in #help-forum
Open in Discord
BillyOP
I really did not found any valuable answer in the internet or from AI tools.

the error
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 UsersData
    at tbody
    at table
    at div
    at div
    at UsersTable
    at div
    at page (Server)
    at InnerLayoutRouter (


the component I use Suspense in it
"use client";
import React, { Suspense } from "react";
import DrowerNavLinksLayout from "../ui/drawer-navlinks-layout";
import Nav from "../ui/nav";
import Loading from "@/components/ui/spin-loading";
import Title from "../ui/title";

export default function Drawer({ children }: childrenType) {
  const [toggleDrawer, setToggleDrawer] = React.useState<boolean>(true);

  return (
    <div className="grid grid-cols-20 h-screen">
      {toggleDrawer ? (
        <div
          className={`bg-white col-span-10 sm:col-span-7 md:col-span-6 lg:col-span-5 xl:col-span-4 2xl:col-span-3 border-r overflow-x-hidden`}
        >
          <DrowerNavLinksLayout
            toggleDrawer={toggleDrawer}
            setToggleDrawer={setToggleDrawer}
          />
        </div>
      ) : null}
      <div
        className={`${
          toggleDrawer
            ? "col-span-10 sm:col-span-13 md:col-span-14 lg:col-span-15 xl:col-span-16 2xl:col-span-17"
            : "col-span-full"
        } h-full w-full`}
      >
        <Nav
          toggleDrawer={toggleDrawer}
          setToggleDrawer={setToggleDrawer}
          isDashboard={true}
        />
        <article className="container py-10 h-[calc(100vh-91px)] overflow-y-scroll relative">
          <Suspense fallback={<Loading />}>{children}</Suspense>
        </article>
      </div>
    </div>
  );
}


the {children} is all the components of the dashboard(users, pages, and etc...) exclude the navbar and the sidebar
Answered by Plague
Found the issue here: https://github.com/sfwnisme/school-management-system/blob/master/components/ui/users/users-table.tsx

The problem is your UsersData component is a server component that is using async/await and is being directly imported into the UsersTable component which is a client component, that is an unsupported pattern and makes your UsersData component render as a client component which cannot use async/await
View full answer

7 Replies

@Billy I really did not found any valuable answer in the internet or from AI tools. the error txt 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 UsersData at tbody at table at div at div at UsersTable at div at page (Server) at InnerLayoutRouter ( the component I use Suspense in it js "use client"; import React, { Suspense } from "react"; import DrowerNavLinksLayout from "../ui/drawer-navlinks-layout"; import Nav from "../ui/nav"; import Loading from "@/components/ui/spin-loading"; import Title from "../ui/title"; export default function Drawer({ children }: childrenType) { const [toggleDrawer, setToggleDrawer] = React.useState<boolean>(true); return ( <div className="grid grid-cols-20 h-screen"> {toggleDrawer ? ( <div className={`bg-white col-span-10 sm:col-span-7 md:col-span-6 lg:col-span-5 xl:col-span-4 2xl:col-span-3 border-r overflow-x-hidden`} > <DrowerNavLinksLayout toggleDrawer={toggleDrawer} setToggleDrawer={setToggleDrawer} /> </div> ) : null} <div className={`${ toggleDrawer ? "col-span-10 sm:col-span-13 md:col-span-14 lg:col-span-15 xl:col-span-16 2xl:col-span-17" : "col-span-full" } h-full w-full`} > <Nav toggleDrawer={toggleDrawer} setToggleDrawer={setToggleDrawer} isDashboard={true} /> <article className="container py-10 h-[calc(100vh-91px)] overflow-y-scroll relative"> <Suspense fallback={<Loading />}>{children}</Suspense> </article> </div> </div> ); } the `{children}` is all the components of the dashboard(users, pages, and etc...) exclude the navbar and the sidebar
Plague
Can you show your UsersData component, that seems to be the source of the issue according to the error
@Plague 

// "use client";
import React from "react";
import Button from "../button-with-link";
import { Edit, Trash } from "lucide-react";
import { getAllUsers } from "@/lib/actions";

export default async function UsersData() {
  const users = await getAllUsers();

  // const usersData = await props?.usersData;
  const data = users?.data?.data?.map((user: IUser) => (
    <tr key={user?.id} className="divide-x">
      <td className="py-2 px-4 whitespace-nowrap text-sm font-medium text-gray-500 ">
        {user?.id}
      </td>
      <td className="py-2 px-4 whitespace-nowrap text-sm font-medium text-gray-500 ">
        {user?.fullName}
      </td>
      <td className="py-2 px-4 whitespace-nowrap text-sm font-medium text-gray-500 ">
        {user?.email}
      </td>
      <td className="py-2 px-4 whitespace-nowrap text-sm font-medium text-gray-500 ">
        {user?.address}
      </td>
      <td className="py-2 px-4 whitespace-nowrap text-sm font-medium text-gray-500 ">
        {user?.country}
      </td>
      <td className=" flex gap-2 py-2 px-4 whitespace-nowrap text-sm font-medium text-gray-500 ">
        <Button size="xs" variant="info" width="fit">
          <Edit size={15} />
        </Button>
        <Button size="xs" variant="danger" width="fit">
          <Trash size={15} />
        </Button>
      </td>
    </tr>
  ));
  return <>{data}</>;
}
Plague
Found the issue here: https://github.com/sfwnisme/school-management-system/blob/master/components/ui/users/users-table.tsx

The problem is your UsersData component is a server component that is using async/await and is being directly imported into the UsersTable component which is a client component, that is an unsupported pattern and makes your UsersData component render as a client component which cannot use async/await
Answer
Based on the structure of your app, I don't understand why UsersTable needs to be a client component? It isn't using any client-side only features or interactivity and is rendered as a direct child of the page.tsx (another server component) on the dashboard/users page
Plague
I wouldn't recommend wrapping the entire children prop in a single Suspense as this will block the render of all children until everything is done.

Instead remove the Suspense arond the children and move the Suspense to where it is needed, like wrapping the UsersData inside the UsersTable in Suspense and creating a loading.tsx file for page segments etc.