Layout Wrapper causes elements to vanish

Answered

Norrbottenspets posted this in #help-forum

NorrbottenspetsOP

2023-07-12T00:20:45.000Z

Layout wrapper causes everything on page to vanish.

I'm working with 1 page, index.js with the following code:

export default function Home() {
  return (
    <Layout>
      <Head>
        <title>Title</title>
      </Head>
      <section className={utilStyles.headingMd}>
        <h1>test</h1>
        <h1>BlahBlahBlah</h1>
      </section>
    </Layout>
  )
}

Layout is a wrapper that I intend to use for stuff like the navbar, header, and footer:

export default function Layout({children}) {
    <div className={styles.container}>
        <div className={roboto_mono.className}>
            <Head className={styles.header}>
                <link rel='icon' href='../public/favicon.ico' />
            </Head>
        </div>
        <body className={roboto_mono.className}>{children}</body>
    </div>
}

I figure I should be able to at the very least be able to see the two h1 texts, but it's just a completely blank page. Is there any reason why nothing at all shows up?

Answered by joulev

hmm this one is interesting...

View full answer

14 Replies

NorrbottenspetsOP

2023-07-12T01:09:42.000Z

Small update:
The issue is 100% something with Layout since removing the Layout element in index.js causes elements to show up again, but I can't find what in Layout is causing nothing to show even when it's reduced down to just

<body>{children}</body>

@Norrbottenspets Layout wrapper causes everything on page to vanish. I'm working with 1 page, index.js with the following code: js export default function Home() { return ( <Layout> <Head> <title>Title</title> </Head> <section className={utilStyles.headingMd}> <h1>test</h1> <h1>BlahBlahBlah</h1> </section> </Layout> ) } Layout is a wrapper that I intend to use for stuff like the navbar, header, and footer: js export default function Layout({children}) { <div className={styles.container}> <div className={roboto_mono.className}> <Head className={styles.header}> <link rel='icon' href='../public/favicon.ico' /> </Head> </div> <body className={roboto_mono.className}>{children}</body> </div> } I figure I should be able to at the very least be able to see the two h1 texts, but it's just a completely blank page. Is there any reason why nothing at all shows up?

joulev

2023-07-12T01:18:16.000Z

Pages router? Then dont use <body> in it

<body> should be handled by _document.js only

@joulev Pages router? Then dont use <body> in it

NorrbottenspetsOP

2023-07-12T01:36:24.000Z

I've since removed <body> , even to where the code in layout was as below, but it seems like nothing is fixing the issue.

export default function Layout({children}) {
    <div>{children}</div>
}

joulev

2023-07-12T01:37:27.000Z

then you need to give me a minimal reproduction repository

@joulev then you need to give me a minimal reproduction repository

NorrbottenspetsOP

2023-07-12T01:43:34.000Z

https://github.com/NonNoetic/sunburn

@Norrbottenspets https://github.com/NonNoetic/sunburn

joulev

2023-07-12T01:45:09.000Z

move the content outside Head. only keep the title there

@joulev move the content outside `Head`. only keep the `title` there

NorrbottenspetsOP

2023-07-12T01:49:26.000Z

still no content, only blank page

joulev

2023-07-12T01:54:33.000Z

hmm this one is interesting...

Answer

joulev

2023-07-12T01:57:55.000Z

or it's not so interesting... you never returned any layouts. you need to put a return here

@Norrbottenspets ^

NorrbottenspetsOP

2023-07-12T01:58:13.000Z

lmfao no way

omg ur right

thank you for spotting that I would have been chasing my tail through the entire file system all night