"use cache" build error
Unanswered
Snowshoe posted this in #help-forum
SnowshoeOP
Hi everyone, I’m building an app using the new use cache directive. In my RootLayout, I created a Navbar component that imports a client component called NavbarSearch. This component uses import { usePathname } from "next/navigation".
The problem is, after importing usePathname in NavbarSearch, all my other components that use server actions throw an error during the build. The error says:
“A component accessed data, headers, params, searchParams, or a short-lived cache without a Suspense boundary nor a use cache above it.”
When I remove the usePathname logic from the RootLayout, the project builds successfully. The app works fine in development and runtime, but the build fails. For context, I also added a loading.tsx file for the component that uses server actions, and all my server actions are wrapped with use cache.
Any idea how I can resolve this? Thanks in advance for your help! 🙏
The problem is, after importing usePathname in NavbarSearch, all my other components that use server actions throw an error during the build. The error says:
“A component accessed data, headers, params, searchParams, or a short-lived cache without a Suspense boundary nor a use cache above it.”
When I remove the usePathname logic from the RootLayout, the project builds successfully. The app works fine in development and runtime, but the build fails. For context, I also added a loading.tsx file for the component that uses server actions, and all my server actions are wrapped with use cache.
Any idea how I can resolve this? Thanks in advance for your help! 🙏
17 Replies
U should not include client components in your layout.tsx
it will throw a bunch of random errors which sometimes leads to different ways trying to solve it
SnowshoeOP
First I created a Navbar component which is server side and that component imports the client component. This is still not allowed?
@Snowshoe First I created a Navbar component which is server side and that component imports the client component. This is still not allowed?
You Navbar component cant import usePathname
but if u import client component in Navbar then it will work
SnowshoeOP
I imported NavbarSearch (client) into Navbar (server) into RootLayout
yes thats correct
can u show me how your NavbarSearch looks like
SnowshoeOP
"use client";
import { Search } from "lucide-react";
import { usePathname } from "next/navigation";
import { useModal } from "../providers/ModalContext";
const NavbarSearch = () => {
const { setOpen } = useModal();
const pathname = usePathname();
const handleModalOpen = () => {
setOpen(true);
};
return (
#Unknown Channel
<div className="rounded-xl border border-muted p-2 md:hidden">
<Search onClick={handleModalOpen} className="size-7 text-muted" />
</div>
{pathname !== "/" ? (
#Unknown Channel
<div className="hidden md:block">
<button
className="flex h-[32px] w-[250px] items-center justify-between rounded-xl border border-border bg-card p-2 text-muted-foreground shadow-sm transition focus:outline-none"
onClick={handleModalOpen}
>
<div className="flex items-center justify-center gap-2">
<Search className="size-4 text-muted-foreground" />
<span className="text-base text-muted-foreground">
Search tokens...
</span>
</div>
<p className="text-muted-foreground">
<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[12px] font-medium text-muted-foreground opacity-100">
<span className="">⌘</span>K
</kbd>
</p>
</button>
</div>
</>
) : null}
</>
);
};
export default NavbarSearch;
import { Search } from "lucide-react";
import { usePathname } from "next/navigation";
import { useModal } from "../providers/ModalContext";
const NavbarSearch = () => {
const { setOpen } = useModal();
const pathname = usePathname();
const handleModalOpen = () => {
setOpen(true);
};
return (
#Unknown Channel
<div className="rounded-xl border border-muted p-2 md:hidden">
<Search onClick={handleModalOpen} className="size-7 text-muted" />
</div>
{pathname !== "/" ? (
#Unknown Channel
<div className="hidden md:block">
<button
className="flex h-[32px] w-[250px] items-center justify-between rounded-xl border border-border bg-card p-2 text-muted-foreground shadow-sm transition focus:outline-none"
onClick={handleModalOpen}
>
<div className="flex items-center justify-center gap-2">
<Search className="size-4 text-muted-foreground" />
<span className="text-base text-muted-foreground">
Search tokens...
</span>
</div>
<p className="text-muted-foreground">
<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[12px] font-medium text-muted-foreground opacity-100">
<span className="">⌘</span>K
</kbd>
</p>
</button>
</div>
</>
) : null}
</>
);
};
export default NavbarSearch;
looks fine
SnowshoeOP
When I remove just the usePathname I can build the app. But if I leave it there i get this error message "Error occurred prerendering page "/xxx/[id]""
SnowshoeOP
When I run the app on localhost it works as expected but when I want to build it throws an error
Wrap your client component in Suspende when you use it in NavBar server (layout).
I don’t think you should actually need to do it (—edit: in Next.js 14 it wasn’t needed, seems like Next 15 now wants ALL “dynamic” components to be wrapped in Suspense ), client component looks good to me.
I don’t think you should actually need to do it (—edit: in Next.js 14 it wasn’t needed, seems like Next 15 now wants ALL “dynamic” components to be wrapped in Suspense ), client component looks good to me.
SnowshoeOP
I wrapped the client component that I imported into the Navbar into a Suspense. I can build the project now! Thank you so much for all the help 🙂
. "<Suspense fallback={null}>
<NavbarSearch />
</Suspense>
"
. "<Suspense fallback={null}>
<NavbarSearch />
</Suspense>
"
Glad it worked!
This is weird, unless “usePathname()” is using the new “use” hook or something similar under the hood.
Next.js 15 now marks as async and dynamic the components that access params, search params, cookies. But I thought it it only applied to Server Components accessing these dynamic APIs, and you need to wrap a component in <Suspense>.
Good to know it applies to Client Components too, or at least temporarily anyway
This is weird, unless “usePathname()” is using the new “use” hook or something similar under the hood.
Next.js 15 now marks as async and dynamic the components that access params, search params, cookies. But I thought it it only applied to Server Components accessing these dynamic APIs, and you need to wrap a component in <Suspense>.
Good to know it applies to Client Components too, or at least temporarily anyway
SnowshoeOP
I sent you a friend request 🙂