Unexpected Errors In Components
Answered
Buller's Shearwater posted this in #help-forum
Buller's ShearwaterOP
Hey there! I'm starting out with React and NextJS and am following a tutorial to learn.
I get errors at the bottom of my browser screen, but none in vscode.
I get errors at the bottom of my browser screen, but none in vscode.
Answered by joulev
You are putting your <Navbar /> outside <body> right? Put it inside <body>
11 Replies
@Buller's Shearwater Hey there! I'm starting out with React and NextJS and am following a tutorial to learn.
I get errors at the bottom of my browser screen, but none in vscode.
You are putting your <Navbar /> outside <body> right? Put it inside <body>
Answer
Buller's ShearwaterOP
I am
alright let me re run it
Fixed it! No errors
Can I know why this happened though?
I don't understand how the body affects the difference between rendering
@Buller's Shearwater Can I know why this happened though?
Page content (div, nav, span, etc) must be inside <body> for it to be valid html
Your navbar is outside body => invalid html => browser aggressively tried to correct it => hydration fails because react expects nav to be outside body but it’s no longer there because the browser corrected it
Buller's ShearwaterOP
I see
Alright thanks so much!
You’re welcome