missingSuspenseWithCSRBailout in Next.js v14.1 with App Router #61298
Replies: 1 comment 7 replies
-
|
Hi, Are you using Although the flag you link to is experimental, I am surprised that it doesn't do the trick. // next.config.js
module.exports = {
experimental: {
missingSuspenseWithCSRBailout: false
}
}This, should've been all that's needed, according to: |
Beta Was this translation helpful? Give feedback.
-
|
Hey @icyJoseph, I've shared the core code of my current layout for your review. As you'll notice, I'm not utilising import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Providers } from "@/providers/providers";
import "./globals.css";
// Setting up the Inter font
const inter = Inter({ subsets: ["latin"] });
// RootLayout component definition
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" suppressHydrationWarning>
<body className={inter.className}>
<Providers>{children}</Providers>
</body>
</html>
);
}This snippet represents the minimal foundational code of my layout as it stands. |
Beta Was this translation helpful? Give feedback.
-
|
experimenting the same problem, any news on that? |
Beta Was this translation helpful? Give feedback.
-
|
Hey @icyJoseph, question would be why the flag in config is not recognizable. Here's the error: |
Beta Was this translation helpful? Give feedback.
-
|
I noticed that you have a Providers component. You may want to check all your providers, maybe comment them out one by one until you discover which of them is causing the issue. |
Beta Was this translation helpful? Give feedback.
-
|
Same here |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
During the build process of a Next.js application, I encountered warnings indicating that entire pages are being defaulted to client-side rendering due to the use of
useSearchParams(). The warnings persist despite not usinguseSearchParams()in the mentioned pages. I've attempted to mitigate this issue by enablingmissingSuspenseWithCSRBailout: falsein mynext.config.js, but the problem remains unresolved. I'm seeking advice on how to address these warnings and ensure proper rendering.Currently, I'm avoiding this problem by using :
as mentioned in the official documentation. Additionally, I'm using Clerk.js for authentication and user management.
Additional information
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions