crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-15 11:51:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Gracefully handle cart fetching for _not-found page

Browse Source 
The prerendering of the `/_not-found` page was failing due to an error in the Server Components render, specifically when the `RootLayout` attempted to fetch cart data using `getCart()`. The `getCart()` function uses `cookies()`, which is not available or reliable during the static prerendering of error pages.

This commit modifies `app/layout.tsx` to wrap the `getCart()` call in a `try...catch` block. If an error occurs during this call (e.g., during build-time rendering of `_not-found.tsx`), it now logs the error and defaults to a `Promise.resolve(undefined)` for the cart state.

The `CartProvider` and related components are already designed to handle an undefined cart, ensuring that your application remains stable and the build process can complete successfully for static pages like `_not-found`.
This commit is contained in:
google-labs-jules[bot] 2025-05-21 06:19:11 +00:00
parent 94fd71c35e
commit fc661b75ec
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/layout.tsx
View File

@ -3,6 +3,7 @@ import { Navbar } from 'components/layout/navbar';
import { WelcomeToast } from 'components/welcome-toast'; import { WelcomeToast } from 'components/welcome-toast';
import { GeistSans } from 'geist/font/sans'; import { GeistSans } from 'geist/font/sans';
import { getCart } from 'lib/shopify'; import { getCart } from 'lib/shopify';
import type { Cart } from 'lib/shopify/types';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { Toaster } from 'sonner'; import { Toaster } from 'sonner';
import './globals.css'; import './globals.css';
@ -27,13 +28,20 @@ export default async function RootLayout({
}: { }: {
children: ReactNode; children: ReactNode;
}) { }) {
// Don't await the fetch, pass the Promise to the context provider let cartPromise: Promise<Cart | undefined>;
const cart = getCart();
try {
// Don't await the fetch, pass the Promise to the context provider
cartPromise = getCart();
} catch (e) {
console.error('Failed to get cart during layout rendering (possibly build time for static page):', e);
cartPromise = Promise.resolve(undefined);
}
return ( return (
<html lang="en" className={GeistSans.variable}> <html lang="en" className={GeistSans.variable}>
<body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white"> <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
<CartProvider cartPromise={cart}> <CartProvider cartPromise={cartPromise}>
<Navbar /> <Navbar />
<main> <main>
{children} {children}