Blitz: Add Suspense wrapper to resolve initial error 500

Thanks blitz-js/blitz#4339 (comment)
FixMyBerlin · Oct 14, 2024 · 84b6bb6 · 84b6bb6
1 parent df3c1ef
commit 84b6bb6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import "@/src/app/_components/layouts/global.css"
 import { clsx } from "clsx"
 import { Metadata, Viewport } from "next"
+import { Suspense } from "react"
 import { BlitzProvider } from "../blitz-client"
 import { defaultMetadata } from "./_components/layouts/defaultMetadata"
 import { fontClasses } from "./_components/layouts/fonts"
@@ -16,7 +17,9 @@ export default async function RootLayout({ children }: { children: React.ReactNo
     <html lang="de" className={clsx(fontClasses, "h-full scroll-smooth")}>
       <body className="flex min-h-full w-full flex-col text-gray-800 antialiased">
         <BlitzProvider>
-          <div className="flex h-full w-full flex-none flex-grow flex-col">{children}</div>
+          <Suspense>
+            <div className="flex h-full w-full flex-none flex-grow flex-col">{children}</div>
+          </Suspense>
         </BlitzProvider>
         <TailwindResponsiveHelper />
       </body>

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -4,7 +4,7 @@ import "@/src/app/_components/layouts/global.css"
 import { withBlitz } from "@/src/blitz-client"
 import { init } from "@socialgouv/matomo-next"
 import { AuthenticationError, AuthorizationError } from "blitz"
-import { useEffect, useRef } from "react"
+import { Suspense, useEffect, useRef } from "react"
 import { fontRedHatText } from "../app/_components/layouts/fonts"
 
 const MATOMO_URL = process.env.NEXT_PUBLIC_MATOMO_URL
@@ -51,7 +51,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         }
       `}</style>
       <ErrorBoundary FallbackComponent={RootErrorFallback}>
-        {getLayout(<Component {...pageProps} />)}
+        <Suspense>{getLayout(<Component {...pageProps} />)}</Suspense>
       </ErrorBoundary>
     </>
   )

diff --git a/tests/blitz/utils.tsx b/tests/blitz/utils.tsx
@@ -4,6 +4,7 @@ import { render as defaultRender } from "@testing-library/react"
 import { renderHook as defaultRenderHook } from "@testing-library/react-hooks"
 import { MemoryRouterProvider } from "next-router-mock/dist/MemoryRouterProvider"
 import { NextRouter } from "next/router"
+import { Suspense } from "react"
 import { vi } from "vitest"
 
 export * from "@testing-library/react"
@@ -40,7 +41,7 @@ export function render(
       <MemoryRouterProvider>
         <BlitzProvider dehydratedState={dehydratedState} client={queryClient}>
           <RouterContext.Provider value={{ ...mockRouter, ...router }}>
-            {children}
+            <Suspense>{children}</Suspense>
           </RouterContext.Provider>
         </BlitzProvider>
       </MemoryRouterProvider>
@@ -69,7 +70,7 @@ export function renderHook(
     wrapper = ({ children }: { children: React.ReactNode }) => (
       <BlitzProvider dehydratedState={dehydratedState} client={queryClient}>
         <RouterContext.Provider value={{ ...mockRouter, ...router }}>
-          {children}
+          <Suspense>{children}</Suspense>
         </RouterContext.Provider>
       </BlitzProvider>
     )