Wrap useSearchParams consumers in Suspense boundaries

Next.js requires components using useSearchParams to be wrapped in a Suspense boundary for static page generation. Fixes build failure on /approvals (and preemptively /organization).

Rhys Sullivan committed 9 months ago

Commit 002c0ef1 parent 86d54b02 files · +13 −4Browse files

Unified · Split

2 files

executor/apps/web/src/app/organization/page.tsx +6 −1
executor/apps/web/src/components/app-shell.tsx +7 −3

executor/apps/web/src/app/organization/page.tsx+6−1

+import { Suspense } from "react";
 import { OrganizationSettingsView } from "@/components/organization-settings-view";
 export default function OrganizationPage() {
-  return <OrganizationSettingsView />;
+  return (
+    <Suspense>
+      <OrganizationSettingsView />
+    </Suspense>
+  );
 }

executor/apps/web/src/components/app-shell.tsx+7−3

 "use client";
-import { useEffect, useMemo, useState, type FormEvent } from "react";
+import { Suspense, useEffect, useMemo, useState, type FormEvent } from "react";
 import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useMutation } from "convex/react";
         <NavLinks />
       </div>
       <div className="pb-4">
-        <SessionInfo />
+        <Suspense>
+          <SessionInfo />
+        </Suspense>
       </div>
     </aside>
   );
             <NavLinks onClick={() => setOpen(false)} />
           </div>
           <div className="mt-auto pb-4">
-            <SessionInfo />
+            <Suspense>
+              <SessionInfo />
+            </Suspense>
           </div>
         </SheetContent>
       </Sheet>