Warning: You are mounting a new body component when a previous one has not first unmounted

Asked 11/2, 2023 at 21:39 Answered 11/1 at 15:31

I am trying to create a page with dashboard layout and a page with default Next.js 13 layout.

I have a problem on the dashboard page.

When I go to the addresses in the dashboard, the display of menus, items, etc. is correct, and to check the error, I deleted the components and I have only two pages with one link.

But it still gives errors in the browser console:

Warning: You are mounting a new body component when a previous one has not first unmounted. It is an error to render more than one body component at a time and attributes and children of these components will likely fail in unpredictable ways.

Please only render a single instance of and if you need to mount a new one, ensure any previous ones have unmounted first.

and:

Warning: validateDOMNesting(...): cannot appear as a child of <main>.

Wymore answered 11/2, 2023 at 21:39 Comment(3)

There isn't enough information here. Please provide more context regarding both errors - including problematic files, full non-obfuscated errors and ideally a working sandbox example --- The 2nd error is a common mistake but is more of a warning. It happens when for example you try to place a <div> inside of a <p> tag (block element inside of an inline element). – Quintile 12/2, 2023 at 1:46

I have same issue in next13 when create seperate layout for each module its rendering as 2 pages with 2 html and 2 bodies – Hakon 27/2, 2023 at 11:56

I'm having the same issue with NextJS13 - has anyone managed to resolve this? – Thinia 11/4, 2023 at 15:11

I have the same error, It seems like you can have HTML and body only in your root layout. Although the doc isn't clear on this, some references can be found here https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts and here https://nextjs.org/docs/app/building-your-application/routing/route-groups#opting-specific-segments-into-a-layout

So if your root layout looks like this

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Any other layout should not have HTML and body.

Code for layout in the group will be like this-

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <section>{children}</section>;
}

Also, You need to keep below in mind if you have more than 1 group-

If you create a root layout and then create a layout in one of the groups, it's necessary to have an individual layout in all the groups.

Autotrophic answered 11/5, 2023 at 14:34 Comment(0)

I removed the body and html tag from every layout except root layout and the error solved

Honesty answered 6/11, 2023 at 10:39 Comment(0)

If you get such an error message, you are using html tags in two different layout files. html tags should only be in one layout file.

Glossary answered 25/9, 2023 at 17:2 Comment(0)

Like the other comments, it seems that you can only have one <html> and one <body> tag, and that goes on the root layout.ts.

Technically you do not need other layout files, but you might want to use them for other reasons, like adding a different metadata for instance.

The way I am currently doing seems good to keep semantics good and still use a new layout file. I just use a React.Fragment

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Title",
  description: "Description",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <>{children}</>;
}

Centesimal answered 11/1 at 15:31 Comment(0)

Recommended topics

Hot tags