Next.js Discord

Discord Forum

chapter1,when i run pnpm dev, and Open http://localhost:3000 on my browser. I have a problem

Answered
Scottish Fold posted this in #help-forum
Open in Discord
Scottish FoldOP
does any one can help me, I am a beginner of next js

i cant understand this mistake blow Unhandled Runtime Error Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used See more info here: https://nextjs.org/docs/messages/react-hydration-error - A server/client branchif (typeof window !== 'undefined'). - Variable input such asDate.now()orMath.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.


...
+ <main className="flex min-h-screen flex-col p-6">
- {" \n "}
Answered by gin
so that one extension u had inserted some html in the dom before the client rerendered anything else, and nextjs didnt expect that so it threw that hydration error
View full answer

146 Replies

is there a reason u using canary?
if u are a begginer u should use the stable version
npx create-next-app@latest
Scottish FoldOP
I followed this article
https://nextjs.org/learn/dashboard-app/getting-started

and i use this comamnd npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm
u didnt modify any of the src
Scottish FoldOP
this is my layout.tsx, i did`t modify any src file
i just run the two comamnd
gin
yeah looks good
yeah thats strange
remove the --use-pnpm
and install again
it could be that pnpm installed canary for some reason
use npm
Scottish FoldOP
you mean, i recreate the project by use this comamnd:

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"
Scottish FoldOP
hold on, i`ll try
but i see this error tips in error page
it looks like , the version of nextjs is outdated
@Scottish Fold but i see this error tips in error page it looks like , the version of nextjs is outdated
gin
yeah thats correct, canary is being updated almost daily and is not stable
rm -rf your project and install it using the command above
Scottish FoldOP
i met a new problem
@Scottish Fold i met a new problem
gin
it installed react 19 for some reason
wait let me check
Scottish FoldOP
thanks, bro
@Scottish Fold thanks, bro
gin
alr we can do it this way, install it with --use-pnpm
npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm
once u installed it, rm -rf node_modules
Scottish FoldOP
It actually has this folder, which usually requires me to execute npm install, but it has this folder from the beginning
delete that folder
and delete pnpm-lock.yaml
Scottish FoldOP
i did
@Scottish Fold i did
gin
go into your package.json and replace all the entries below with this version of the pkgs
"@types/react": "^18",
"@types/react-dom": "^18",
"next": "14.2.7",
"react-dom": "^18.2.0",
"react": "^18",
this donwgrades react and next to the stable versions
Scottish FoldOP
cool ,i see that ,you said
@Scottish Fold cool ,i see that ,you said
gin
yeah replace react-dom, react, next and next-auth
with the versions i told u
and next-auth current version is 4.24.7
Scottish FoldOP
got it
@Scottish Fold got it
gin
nice but use npm
Scottish FoldOP
i modified, now does i need run : pnpm i ?
Scottish FoldOP
ok
i done , doed next command is npm run dev ?
Scottish FoldOP
ok
a little slow, just wait a moment
the offical article recomend me use pnpm, but why it does`t work , I'm a little confused.
@Scottish Fold the offical article recomend me use pnpm, but why it does`t work , I'm a little confused.
gin
pnpm should install the pkgs faster but i find npm more stable
Scottish FoldOP
All right
@Scottish Fold All right
gin
does it work?
Scottish FoldOP
a new proplem
@Scottish Fold a new proplem
gin
show your layout.tsx and page.tsx
Scottish FoldOP
@Scottish Fold Click to see attachment
gin
just for a test replace page.tsx return with 
return (<>Test</>);
Scottish FoldOP
it works and no error
@Scottish Fold it works and no error
gin
ok i see the issue try wrapping main with #Unknown Channel</>
<><main>The stuff u had before</main></>
Scottish FoldOP
cool ,works
does there is a issue in github , the same problem as me ?
@Scottish Fold does there is a issue in github , the same problem as me ?
gin
ill install it myself wait a sec
Scottish FoldOP
ok
@Scottish Fold ok
gin
i see for some random reason tailwind is not imported correctly
import "@/app/ui/global.css";

add this in layout.tsx
Scottish FoldOP
ok
@Scottish Fold Click to see attachment
gin
ok wait ill try to fix it for u
https://anydesk.com/ get this and tell me your code
Scottish FoldOP
click which one
@Scottish Fold click which one
gin
the first one
Scottish FoldOP
what is this
i never seen this software
@Scottish Fold what is this
gin
remote access its like a extended screenshare where i can control your mouse and keyboard
Scottish FoldOP
Wait
Bro, does u in china or german
@Scottish Fold Bro, does u in china or german
gin
im from germany
Scottish FoldOP
πŸ˜€
1 022 370 603
bro ,this code
gin
split up the screen @Scottish Fold
Scottish FoldOP
Yes
Yes
Scottish FoldOP
Install ing
The same problem i meet last night at home
@Scottish Fold The same problem i meet last night at home
gin
lets try with npm again
Scottish FoldOP
All right
Network slowly
Looks like
Vscode set English ？
@Scottish Fold Network slowly
gin
yeeees
its a pain
Scottish FoldOP
Wait i set english
English now
Scottish FoldOP
I want go to Toilet πŸ˜‚
Bro
Bro
Bro
Take a rest
Bro
I need lock the screen when i leave the sit
gin
we almost at the core of the issue
Scottish FoldOP
I am in work office
@Scottish Fold I am in work office
gin
alr
i dont have much time left
need to go to work in a hour
Scottish FoldOP
Ok coming soon
Is it day or night in Germany
gin
its morning
i woke up extremely early cause i gotta work on a freelancing project i have
Scottish FoldOP
πŸ‘
I sleep 8 hour every day
I coming soon wait
I am back
Continue
Bro
Scottish FoldOP
Wait 50s my be
It is slow
Scottish FoldOP
Call me on discord bro
gin
@Scottish Fold i gotta go now
but the issue is fixed
u can install it and it will work also with canary
Scottish FoldOP
Reinstall by the command of official article ？
Scottish FoldOP
Got it
But i don't know what is the problem
Scottish FoldOP
πŸ‘
gin
so that one extension u had inserted some html in the dom before the client rerendered anything else, and nextjs didnt expect that so it threw that hydration error
Answer
gin
took me almost 2 hours to figure the core issue out lmao
Scottish FoldOP
Got it
But chorme extension is common
gin
i guess that one u used was somehow messing with the page a bit to hard
im going now
Scottish FoldOP
I think so
Thanks alot bro
πŸ‘πŸ‘πŸ‘
gin
if that helped u it would be lovely if u give a feedback for me in #kudos, would appreciate it
and if u have any other question just open a new post
we are very helpful people here
Scottish FoldOP
You are good man πŸ˜€πŸ˜€πŸ˜€
How to feedback in kudos
gin
something like this
Scottish FoldOP
Got it good man
So good