Body component mounting????
Unanswered
Capelin posted this in #help-forum
CapelinOP
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 <body> and if you need to mount a new one, ensure any previous ones have unmounted first.
https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts
`States that root layout should have html and body, subsequent layouts shouldnt.
Going to root works fine, going to /about works fine,
Going back to root creates error.
Should I write a conditional to change the layout on second page visit?
Surely this is a bug.
https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts
`States that root layout should have html and body, subsequent layouts shouldnt.
Going to root works fine, going to /about works fine,
Going back to root creates error.
Should I write a conditional to change the layout on second page visit?
Surely this is a bug.
23 Replies
@Capelin 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 <body> and if you need to mount a new one, ensure any previous ones have unmounted first.
https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts
`States that root layout should have html and body, subsequent layouts shouldnt.
Going to root works fine, going to /about works fine,
Going back to root creates error.
Should I write a conditional to change the layout on second page visit?
Surely this is a bug.
Give me a reproduction repository. This is most likely a bug in your code not a nextjs bug
CapelinOP
Do you want a full github repo or can I paste the code?
A minimal nextjs app
CapelinOP
This might be related to my next-auth. I will try to resolve that and then get back to you if the problem persists.
CapelinOP
https://github.com/DrillableBit/next-debug
Here's a github repo, going to API Auth or Custom Auth and then back to Home triggers the issue.
I'm also trying to build a custom login page using next-auth pages.
If you help me I'd more than willing to buy you coffee
Here's a github repo, going to API Auth or Custom Auth and then back to Home triggers the issue.
I'm also trying to build a custom login page using next-auth pages.
If you help me I'd more than willing to buy you coffee
layout.tsx is already handled, importing it here leads to duplicate html and body tags => hydration errorsCapelinOP
No way! Where is it importing it from though? Is it just automatic?
@Capelin No way! Where is it importing it from though? Is it just automatic?
in
page.tsx you are importing the layout.tsx file. it leads to errors so don't do thatjust remove the import statement and don't use
<Layout /> in thereCapelinOP
Is it the same for all pages?
same for everywhere
layout is already handled by nextjs
if you import it to pages it will basically become
<Layout>
<Layout>
<Page />
</Layout>
</Layout>which is not what you want
especially if the layout contains "sensitive" tags like
html or body that must not be duplicatedCapelinOP
agreed, but what if I have layoutOne and layoutTwo, would it only be possible to render it as conditionals?
CapelinOP
ah neat!
CapelinOP
I sent a coffee, do you know of any good templates that use the app router?
thanks for that. about templates, you have the [playground](https://github.com/vercel/app-playground) that showcases app router features and plenty of good templates in [here](https://vercel.com/templates?framework=next.js)
CapelinOP
neat, thanks!