[cache components]: build fail because of request.nextUrl.searchParams
#85412
Replies: 1 comment 16 replies
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Also one more issue after upgrading next.js to 16 😁: When navigating from https://coderrshyam.vercel.app/tutorials/javascript to any route other than It disappears when clicking the "Try again" button. 
This happens in both dev as well as prod. My root layout code: import type { Metadata, Viewport } from "next";
import { META_THEME_COLORS, siteConfig } from "@/config/site";
import { Provider } from "@/context/provider";
import { Body, HTML } from "@/lib/layout.shared";
import { createMetadata } from "@/lib/metadata";
import "./globals.css";
export const metadata: Metadata = createMetadata({
title: {
absolute: siteConfig.notFoundText,
default: siteConfig.shortDescription,
template: `%s | ${siteConfig.name}`,
},
description: siteConfig.description,
metadataBase: new URL(siteConfig.url),
applicationName: siteConfig.name,
authors: [{ name: "Shyam Verma", url: siteConfig.url }],
category: "Information & Technology",
creator: siteConfig.name,
icons: { icon: "/favicon.ico" },
keywords: siteConfig.keywords,
manifest: `${siteConfig.url}/site.webmanifest`,
appleWebApp: {
title: siteConfig.name,
statusBarStyle: "black-translucent",
capable: true,
},
url: "/",
});
export const viewport: Viewport = {
themeColor: META_THEME_COLORS.light,
};
export default function RootLayout({ children }: LayoutProps<"/">) {
return (
<HTML>
<head>
<script
// biome-ignore lint/security/noDangerouslySetInnerHtml: theme
dangerouslySetInnerHTML={{
__html: `
try {
if (localStorage.theme === 'dark' || ((!('theme' in localStorage) || localStorage.theme === 'system') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '${META_THEME_COLORS.dark}')
}
} catch (_) {}
`,
}}
/>
</head>
<Body>
<Provider>{children}</Provider>
</Body>
</HTML>
);
} |
Beta Was this translation helpful? Give feedback.
-
Yes a hard refresh would also activate it. Since it is essentially the same as running with disabled cache For the second error, what does the Provider do? I can think of two reasons for this, but could I see the dev error stack? It either is a React.cloneElement function call, or perhaps a Server Component importing a compound component, like |
Beta Was this translation helpful? Give feedback.
-
|
Provide is just the wrapper of all the providers: "use client";
import { RootProvider } from "fumadocs-ui/provider/next";
import dynamic from "next/dynamic";
import Script from "next/script";
import * as React from "react";
import Loading from "@/app/loading";
import { CallbackToast } from "@/components/callback-toast";
import { Toaster } from "@/components/ui/sonner";
import { JSONLD } from "@/config/site";
import { AnalyticsProvider } from "@/context/analytics-provider";
import { SWRProvider } from "@/context/swr-provider";
import { TopLoaderProvider } from "@/context/top-loader-provider";
const SearchDialog = dynamic(() => import("@/components/search").then((mod) => mod.SearchDialog), {
ssr: false,
});
export function Provider({ children }: Readonly<{ children: React.ReactNode }>) {
return (
<React.Suspense fallback={<Loading />}>
<RootProvider
search={{ SearchDialog }}
theme={{
attribute: "class",
defaultTheme: "system",
enableColorScheme: true,
enableSystem: true,
}}
>
<TopLoaderProvider />
<SWRProvider>{children}</SWRProvider>
<Toaster />
<AnalyticsProvider />
<CallbackToast />
<Script
id="jsonld"
type="application/ld+json"
// biome-ignore lint/security/noDangerouslySetInnerHtml: We need that for proper functioning of app
dangerouslySetInnerHTML={{ __html: JSON.stringify(JSONLD) }}
/>
</RootProvider>
</React.Suspense>
);
}Dev error stack:
// Tutorial Layout
import { DocsLayout } from "fumadocs-ui/layouts/notebook";
import Image from "next/image";
import { Logo } from "@/components/logo";
import { ThemeToggle } from "@/components/theme-toggle";
import { baseOptions } from "@/lib/layout.shared";
import { tutorialSource } from "@/lib/source";
export default function TutorialLayout({ children }: LayoutProps<"/tutorials/[...slug]">) {
return (
<DocsLayout
{...baseOptions}
themeSwitch={{
component: <ThemeToggle mode="light-dark-system" />,
enabled: true,
}}
tree={tutorialSource.pageTree}
nav={{
...baseOptions.nav,
title: <Logo width={30} height={30} />,
children: <div className="mb-1" />,
}}
sidebar={{
tabs: {
transform(option, node) {
const meta = tutorialSource.getNodeMeta(node);
if (!meta?.data.icon) return option;
return {
...option,
icon: (
<Image
src={meta?.data.icon}
alt={meta.data.icon}
height={20}
width={20}
className="size-full rounded-lg max-md:border max-md:p-1"
/>
),
};
},
},
}}
>
{children}
</DocsLayout>
);
}
If so, why this only occured while navigation from |
Beta Was this translation helpful? Give feedback.
-
|
I am speculating a lot here, but I think this is because the payload is doing this "outlining" thing, where some client components are passed as lazy references, to be filled in later - but when these get used within createElement, or cloneElement, they fail cuz the lazy reference has no type. It is a bit difficult to debug this one - assuming this it he issue too. |
Beta Was this translation helpful? Give feedback.
-
Let me try to create a simple reproduction on a fresh nex.js app. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
I am using
Next.js@16with react compiler, cache components and turbopack.I got build error in
route.ts:What I do at this point as searchParams is required to genrate og image.
Additional information
No response
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions