Next.js Discord

Discord Forum

Tried enabling the Cache Component, but it's resulting in the browser crashing.

Unanswered
Pink salmon posted this in #help-forum
Open in Discord
Pink salmonOP
[Error] Unexpected Fiber popped.


Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.

7 Replies

Pink salmonOP
I'm not sure what information you need. I have upgraded to Next 16, enabled cacheComponents, and then visited the home page as usual. The browser tab is hanging, and eventually, the browser crashes. I can confirm it's due to the cache component, as it only happens when it's enabled. Its output in the devtools console is the one in the screenshot.
Pink salmonOP
That's not the root layout. This is the root layout.

import { RootLoading } from "@/components/custom/root-loading";
import { ScrollToTop } from "@/components/custom/scroll-to-top";
import { TailwindIndicator } from "@/components/dev/tailwind-indicator";
import type { Viewport } from "next";
import { NuqsAdapter } from "nuqs/adapters/next/app";
import { type ReactNode, Suspense } from "react";
import { VersionChecker } from "../components/custom/version-checker";
import ReactQueryProvider from "../providers/react-query";

export const viewport: Viewport = {
  initialScale: 1,
  width: "device-width",
  maximumScale: 1,
  viewportFit: "cover",
};

export default async function RootLayout({
  children,
}: { children: ReactNode }) {
  return (
    <html lang="en">
      <body className="font-sans">
        <ReactQueryProvider>
          <NuqsAdapter>
            <Suspense fallback={<RootLoading />}>{children}</Suspense>
          </NuqsAdapter>
        </ReactQueryProvider>
        <VersionChecker />
        <ScrollToTop />
        <TailwindIndicator />
      </body>
    </html>
  );
}


I only shared the layout where the crash occurs.

We have /cms/* pages that have their own layout where this issue doesn't occur.
The browser console says "Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported."

So I provided the layout with context providers for more context. I also refactored that to remove the context and use @xstate/store, but the issue still occurs.
alfonsüs ardani
huh, i guess you did everything right here
might worth in reproducing the error in a minimal setup
like removing components one by one and see what causes the error