Error: Hydration failed because the initial UI does not match what was rendered on the server.
Unanswered
Cinnamon posted this in #help-forum
CinnamonOP
Hey, today I stared a new project with
create-next-app cli. I choose a standard Typescript project with tailwind and app router. I cleaned the root page.tsx file and added just a <div with an <h1> tag and Hello Word inside of it. When I start the dev server, I get the above error and Warning: Expected server HTML to contain a matching <h1> in <div>.. I already deleted my node_module and .next folder and did a clean reinstall of all dependancies, but I'm still getting this error. Does anyone has some more ideas what could be wrong?22 Replies
CinnamonOP
From the page? Simply
import React from 'react'
const Home = () => {
return (
<div>
<h1>Hello World</h1>
</div>
)
}
export default Home@Cinnamon From the page? Simply
import React from 'react'
const Home = () => {
return (
<div>
<h1>Hello World</h1>
</div>
)
}
export default Home
you don't have to import react in nextjs btw
what's your layout.tsx?
CinnamonOP
And my root (only)
So really a stock Next.JS app.
layout.tsx looks like so:import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang='en'>
<body className={inter.className}>
{children}
</body>
</html>
);
}So really a stock Next.JS app.
@Cinnamon From the page? Simply
import React from 'react'
const Home = () => {
return (
<div>
<h1>Hello World</h1>
</div>
)
}
export default Home
try changing to a normal function instead
@!=tgt try changing to a normal function instead
CinnamonOP
You mean not an arrow function?
@!=tgt yeah
CinnamonOP
Makes no difference.
@Cinnamon Makes no difference.
remove the react import too
i think that's the problem
@!=tgt remove the react import too
CinnamonOP
Also, no difference :/
try deleting the
./.next folder and restart dev serverCinnamonOP
Still getting this error.
@Cinnamon Still getting this error.
const Home = () => {
return (
<main>
<h1>Hello World</h1>
</main>
)
}
export default Homechange tags to main
CinnamonOP
Also, when change my page to look like so:
the error says:
function Home() {
return <>Home</>;
}
export default Home;the error says:
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching text node for "Home" in <div>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error@!=tgt tsx
const Home = () => {
return (
<main>
<h1>Hello World</h1>
</main>
)
}
export default Home
change tags to main
CinnamonOP
When I change my page to look like so, the error is again different:
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <main> in <div>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error@!=tgt make a repository with your code
CinnamonOP
Sure! Give me second.
@!=tgt make a repository with your code
CinnamonOP
So, I think I found the problem. It seems like, I misconfigured something. I just created a new project and don't had this error. Maybe something with cacheing or so.
Anyway thanks a lot for your input!
Anyway thanks a lot for your input!