Getting "Hydration failed" error (inconsistently) on the boilerplate project created with create-next-app.

[gkpo]

Summary

I just initiated a project using npx create-next-app@latest. I didn't change anything to it but and I'm getting the 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

I'm getting it the very first time I open the page in the browser after running "npm run dev". Then when I refresh the page, the error goes away. Is this normal?

Additional information

package.json

`
{
  "name": "test-next",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "19.0.0-rc-66855b96-20241106",
    "react-dom": "19.0.0-rc-66855b96-20241106",
    "next": "15.0.3"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "15.0.3"
  }
}

### Example

_No response_

[jonas-is-coding]

Hey, I tried to recreate the Issue, but for me, the dev and the build process worked totally fine.
Here is my package.json:

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "19.0.0-rc-66855b96-20241106",
    "react-dom": "19.0.0-rc-66855b96-20241106",
    "next": "15.0.3"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "15.0.3"
  }
}

Do you have some code for other components you used? Because I don't think, that this error is related to the package.json

[icyJoseph]

Hi,

Could you post the stack error, or screenshot of where the hydration error is happening?

It might as well just be an extension that messing it up. Try it out on incognito mode.

[gkpo]

omg you're right, I identified the guilty extension, which was Colorzilla (color picker).
Thanks so much :)

[icyJoseph]

Nice. It's odd because React 19 promised to somewhat handle this better. I guess that's why we only have an RC and not a full production release.

• https://react.dev/blog/2024/04/25/react-19#compatibility-with-third-party-scripts-and-extensions