I'm getting ReactServerComponentsError when I wrap my providers around children in RootLayout.
Below is my root layout:
import "../styles/globals.css";
import { Space_Mono, Work_Sans } from "next/font/google";
import { Providers } from "./providers";
import { Metadata } from "next";
export const space = Space_Mono({
weight: ["400", "700"],
subsets: ["latin"],
});
export const work = Work_Sans({
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
display: "fallback", //ensure font won't flash to default on reload
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Game-Scope",
description: "Your one-stop destination for all things gaming.",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={work.className}>
<Providers>{children}</Providers>
</body>
</html>
);
}
And this is my providers file:
"use client";
import { ThemeProvider } from "styled-components";
import { SkeletonTheme } from "react-loading-skeleton";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import StyledComponentsRegistry from "@/lib/registry";
import theme from "@/theme";
export function Providers({ children }: { children: React.ReactNode }) {
const queryClient = new QueryClient();
return (
<QueryClientProvider client={queryClient}>
<StyledComponentsRegistry>
<ThemeProvider theme={theme}>
<SkeletonTheme
baseColor="#313131"
highlightColor="#525252"
>
{children}
</SkeletonTheme>
</ThemeProvider>
</StyledComponentsRegistry>
<ReactQueryDevtools />
</QueryClientProvider>
);
}
I'm getting this error error message even thought my RootLayout is not marked with "use client", am I missing something here? and if so what is the right way to wrap my providers around the layout and how do I use metadata in this case.
I tried wrapping the providers directly in my RootLayout but this means I won't be able to use metadata as well because I'll need to mark my root layout with "use client" and it cannot be used in client component.