Why are my root layout's children not rendering?
Answered
sarif posted this in #help-forum
sarifOP
My layout is rendering, but children aren't. There aren't any errors in the node console, or browser console.
For reference, here is my layout.tsx:
I also have a hook in my page.tsx which requests data from the server every 60 seconds, and I can see those requests being made in the network tab of the console. However, none of the page's elements show up in the elements tab. Help would be greatly apperciated!
For reference, here is my layout.tsx:
"use client";
import { ThemeProvider } from "@/components/ui/theme-provider";
import Header from "@/components/view/header";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
const queryClient = new QueryClient();
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem={false}
>
<QueryClientProvider client={queryClient}>
<Header />
{children}
</QueryClientProvider>
</ThemeProvider>
</body>
</html>
);
}I also have a hook in my page.tsx which requests data from the server every 60 seconds, and I can see those requests being made in the network tab of the console. However, none of the page's elements show up in the elements tab. Help would be greatly apperciated!
112 Replies
i tend to use
"use client" on each individual provider components rather than shoving it all on the root layout; have you tried doing that? i suspect the layout isn't rendering at all because it's all client-side code// @file: AppThemeProvider
"use client";
export default function AppThemeProvider(
{ children }: { children: React.ReactNode }
) {
return (
<ThemeProvider
...
>
{children}
</ThemeProvider>
);
}
/// do the same thing for QueryClientProvider
// @file: layout.tsx
// ...
export default function RootLayout(
{ children }: { children: React.ReactNode }
) {
return (
<html lang="en">
<body className={inter.className}>
<AppThemeProvider>
<AppQueryClientProvider>
<Header />
{children}
</AppQueryClientProvider>
</AppThemeProvider>
</body>
</html>
);
}sarifOP
hey thanks let me try this
actually though i dont think this is the issue
i noticed that this issue only started happening after a certain commit i made, where i added some more logic to a certain qeury
but i didnt change the page's react code much at all
so when you checked out an old commit it works fine?
doing a git bisect could pinpoint the offending commit easier if you need to do that
sarifOP
nah i found the exact commit but im struggling to see what caused the issue since i barely changed the html
what i sent is the current code
so something in there is causing the issue
do you have a diff or something? that could be useful
sarifOP
I would never recommend marking a layout as 'use client'
sarifOP
might be easier if i just send the previous file
@Jboncz I would never recommend marking a layout as 'use client'
sarifOP
👍 ill change that for sure
but idt its related to the current issue
I gotcha, I was just trying to add to @iyxan23's suggestion. 🙂
Which ones the original if you dont mind me asking. I got a few mins was going to look as well
@sarif Click to see attachment
sarifOP
original
@sarif Click to see attachment
sarifOP
newest
@sarif Click to see attachment
im afraid this diff seems to be missing the
- and + in the lines 😅@sarif newest
ookay
i tried to copy/paste it from github desktop
I mean, as troubleshooting steps you should just reverse engineer till you find the problem. Pretty easy to do I think if your in the project. Modify the return statement to return something silly like abc123, then slowly add stuff and make sure its returning properly.
Its much harder to determine what the issue is without the full environment.
if I read through the thread correctly your saying this entire page doesnt render anything right?
@Jboncz I mean, as troubleshooting steps you should just reverse engineer till you find the problem. Pretty easy to do I think if your in the project. Modify the return statement to return something silly like abc123, then slowly add stuff and make sure its returning properly.
sarifOP
👍 yea i'll try that
Is this a live site I can go to?
If you inspect the page is the html there but hidden in some way?
sarifOP
nah, i have a vercel link though
Yeah send me that
sarifOP
and the html isn't there
sarifOP
actually i'll jsut make the repo public
i thought i put it on vercel but i didn't
return (
<main className="grid grid-cols-5 grid-rows-5 min-h-[calc(100vh-96px)] p-10 gap-5 bg-secondary">
abc123
</main>
);See if this returns abc123
sarifOP
return <div>Hello</div>; i did this and it renderedOkay.
good first step
sarifOP
yep that worked
ill add in some hooks now
Oh you removed all the logic? You should keep all the logic and functions in place and just change the html
that way we know if its an HTML logic issue or further up the food chain
sarifOP
ah yeah good idea
sarifOP
it didn't work just by removing hooks
lol what is it
your return statement is inside your runQuery statement
Answer
sarifOP
ur kidding
😭
kinda surprised the compiler didnt catch this
a function doesnt have to return something 🙂
technically.
but agreed.
Would actually be a nice rfc
sarifOP
are you talking about the
if (!data) return;that's only returning from the function though, that shouldnt effect the html rendering right
In your editor
sarifOP
oh..
😭
sarifOP
it works now
man no way i missed that LOL
i guess i should have noticed from the extra tabs in the diffchecker
xD
sarifOP
but i thought it was just the difference in formatting from my mac to pc
thank you sm 😭
It makes it easier to see.
if you use vscode anyways
idk what the cool kids use nowadays
and np happy to help, this kind of stuff has happened to me on more than one occasion
@Jboncz You should turn this on 😄
sarifOP
i have this on
@Jboncz idk what the cool kids use nowadays
sarifOP
yeah vscode 😭
sarifOP
i've tried webstorm and all that but nothing compares
Yeah
anyways, gl with the rest of it man!
Im off to bed
sarifOP
tysm! have a good night
dont forget to mark an answer.
also, like @iyxan23 said im surprised the compiler didnt complain.... maybe it should complain if a page.js doesnt return SOMETHING, would be an easy first RFC 🙂
😅 if only i have that much free time to write an RFC
great idea though!