Missing tags in root layout
Answered
Rainbow trout posted this in #help-forum
Rainbow troutOP
This legit doesn't make any sense ok so here's the error:
and here's my route layout:
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<ClerkProvider>
<Providers>
<html lang="en">
<body suppressHydrationWarning={true}>{children}</body>
<Toaster />
</html>
<Toaster />
</Providers>
</ClerkProvider>
);
}
and here's my route layout:
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<ClerkProvider>
<Providers>
<html lang="en">
<body suppressHydrationWarning={true}>{children}</body>
<Toaster />
</html>
<Toaster />
</Providers>
</ClerkProvider>
);
}
30 Replies
Wrap the children with the 2 providers, not html and body @Rainbow trout
@Arinji Wrap the children with the 2 providers, not html and body <@745709884804300952>
Rainbow troutOP
thx bro i'ma try that
ubt
i uninstalled node modules and package.json
and reinstalled so now i have a crap ton of errors 😢
anyway I can quickly reinstall the imports?
Uhhh npm I shldnt show errors if your package.json is fine
Rainbow troutOP
helpp
it didn
t work
import {
ClerkProvider,
SignInButton,
SignedIn,
SignedOut,
UserButton,
} from "@clerk/nextjs";
import "./globals.css";
import Providers from "@/components/Providers";
import { Toaster } from "react-hot-toast";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<ClerkProvider>
<html lang="en">
<body suppressHydrationWarning={true}><Providers>{children}</Providers></body>
</html>
<Toaster />
</ClerkProvider>
);
}
ClerkProvider,
SignInButton,
SignedIn,
SignedOut,
UserButton,
} from "@clerk/nextjs";
import "./globals.css";
import Providers from "@/components/Providers";
import { Toaster } from "react-hot-toast";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<ClerkProvider>
<html lang="en">
<body suppressHydrationWarning={true}><Providers>{children}</Providers></body>
</html>
<Toaster />
</ClerkProvider>
);
}
that's the code rn
and it just displays a blank screen
Even your clerk provider @Rainbow trout
Rainbow troutOP
Put them both in there?
Before it was working fine without that before
Rainbow troutOP
help it is not working 😭
import { ClerkProvider } from "@clerk/nextjs";
import "./globals.css";
import Providers from "@/components/Providers";
import { Toaster } from "react-hot-toast";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
#Unknown Channel
<html lang="en">
<body suppressHydrationWarning={true}><ClerkProvider><Providers>{children}</Providers> </ClerkProvider></body>
<Toaster />
</html>
</>
);
}
import "./globals.css";
import Providers from "@/components/Providers";
import { Toaster } from "react-hot-toast";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
#Unknown Channel
<html lang="en">
<body suppressHydrationWarning={true}><ClerkProvider><Providers>{children}</Providers> </ClerkProvider></body>
<Toaster />
</html>
</>
);
}
do you think we can hop in a call this is so frustrating
I wud rly appreciate it 🙏
Rainbow troutOP
then I get this error
Show your updated code @Rainbow trout
Answer
Rainbow troutOP
what's that
figured it out
that was annoying
thx for the help bro
problem was in provider component, I was returning string children