useSearchParams() should be wrapped in a suspense boundary

[nayanbari]

export default async function BankDetailsPage() {
  return (
    <Suspense>
      <FormLayout
        heading="Bank Details"
        description="Add/Update the details of the bank"
        sidemenu={[
          { title: "General", query: "general" },
          { title: "Operations", query: "operations" },
        ]}
      >
        <BankForm />
      </FormLayout>
    </Suspense>
  );
}

export function FormLayout({
  children,
  heading,
  description,
  sidemenu = [],
}: FormLayoutProps) {
  return (
    <div className="space-y-6 p-10 pb-16">
      <div className="space-y-0.5">
        <h2 className="text-2xl font-bold tracking-tight">{heading}</h2>
        <p className="text-muted-foreground">{description}</p>
      </div>
      <Separator className="my-6" />
      <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
        <aside className="-mx-4 lg:w-1/5">
          <Suspense>
            <FormSideMenu sidemenu={sidemenu} />
          </Suspense>
        </aside>
        <div className="flex-1 lg:max-w-2xl">{children}</div>
      </div>
    </div>
  );
}



export default function FormSideMenu({
  className,
  sidemenu,
  ...props
}: FormSideMenuProps) {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const query = searchParams.get("tab");

  return (
    <nav
      className={cn(
        "flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1",
        className
      )}
      {...props}
    >
      {sidemenu.map((item) => (
        <Link
          key={item.query}
          href={pathname + "?tab=" + item.query}
          className={cn(
            buttonVariants({ variant: "ghost" }),
            query === item.query
              ? "bg-muted hover:bg-muted"
              : "hover:bg-transparent hover:underline",
            "justify-start"
          )}
        >
          {item.title}
        </Link>
      ))}
    </nav>
  );
}

[pawlean (Pauline P. Narvas)]

Hi, @nayanbari! Welcome to the Vercel Community

Can you share more about the error messages that you’re seeing?

Thank you!

[nayanbari]

Hello @pawlean ,

I am unable to build the project because of this error. I tried wrapping components which uses useSearchParams inside the react suspense still I am unable to solve the issue.