Next.js Discord

Discord Forum

Multiple Root Layouts cause "Missing tags" error

Answered
Spectacled bear posted this in #help-forum
Open in Discord
Avatar
Spectacled bearOP
Hi, can anyone help me figure out why I'm getting this error? The following tags are missing in the Root Layout: <body>
I am using route groups to create multiple root layouts and I definitely have the required tags in both layouts.

This is my first group
export default async function PublicRootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AppContextProvider>
          <UnauthedHeader />
          <div className="min-h-screen">{children}</div>
          <Footer />
          <Toaster />
        </AppContextProvider>
      </body>
    </html>
  )
}

And this is my second
export default async function ProtectedRootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  return (
    <html lang="en">
      <body className={inter.className}>
        <AppContextProvider>
          <AuthedHeader />
          <div className="min-h-screen">{children}</div>
          <Footer />
          <Toaster />
        </AppContextProvider>
      </body>
    </html>
  )
}


The project structure is like this:
/app
  /(protected)
    layout.tsx
  /(public)
    layout.tsx
    page.tsx
Answered by Spectacled bear
Nevermind. I found the issue. I had a loading.tsx file in the root:
/app
  /(protected)
    layout.tsx
  /(public)
    layout.tsx
    page.tsx
  loading.tsx


So it was trying to render that loading page :/
View full answer

1 Reply

Avatar
Spectacled bearOP
Nevermind. I found the issue. I had a loading.tsx file in the root:
/app
  /(protected)
    layout.tsx
  /(public)
    layout.tsx
    page.tsx
  loading.tsx


So it was trying to render that loading page :/
Answer