layout.tsx
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { ClientRecoilProvider } from "../providers/recoil-provider";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Turborepo",
description: "Generated by create turbo",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<h1>hello</h1>
<ClientRecoilProvider>
<body className={inter.className}>
{children}
</body>
</ClientRecoilProvider>
</html>
);
}
recoil-provider.tsx
"use client"; // This makes it a client component
import { RecoilRoot } from "recoil";
export const ClientRecoilProvider = ({ children }: { children: React.ReactNode }) => {
return <RecoilRoot>{children}</RecoilRoot>;
};
I get the error that
Error: This component must be used inside a <RecoilRoot> component.
at useBalance (../../packages/store/src/hooks/useBalance.ts:10:73)
at Page (./app/page.tsx:11:84)
digest: "4224829649"
'use client'
import { useBalance } from "@repo/store/balance";
const Page = () => {
const balance = useBalance();
return (
<div>
<h1 className="text-2xl">Welcome to User App {balance}</h1>
</div>
);
}
export default Page;
above is where i call the hook
I try to implement a simple hook in recoil and I know that in order to use that hook, that hook must be called inside a wrapped component. So I wrapped my html body in layout.tsx but I get the error that Error: This component must be used inside a component.
at useBalance (../../packages/store/src/hooks/useBalance.ts:10:73)
at Page (./app/page.tsx:11:84)
digest: “4224829649”
New contributor
Ayush Chamoli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.