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

1 messages · Page 1 of 1 (latest)

unborn pulsar
# 
[Error] Unexpected Fiber popped.

Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
image.png
empty fulcrumBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

edgy novaBOT
# unborn pulsar ``` [Error] Unexpected Fiber popped. ``` ``` Detected multiple renderers concur...
Please add more information to your question

Your question currently does not have sufficient information for people to be able to help. Please add more information to help us help you, for example: relevant code snippets, a reproduction repository, and/or more detailed error messages. See more info on how to ask a good question in https://discord.com/channels/752553802359505017/1138338531983491154 and #welcome message.

Requested by B33fb0n3
unborn pulsar
#

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.

📎 layout.tsx
abstract burrow
unborn pulsar
#

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.

abstract burrow
#

huh, i guess you did everything right here

#

might worth in reproducing the error in a minimal setup