Hydration error when using new React Compiler

[MichaelJOHare]

Dependency information

"dependencies": { "@dnd-kit/core": "^6.3.1", "@react-spring/web": "^10.0.1", "@react-three/fiber": "^9.2.0", "@tailwindcss/postcss": "^4.1.11", "@types/three": "^0.178.1", "@vercel/analytics": "^1.5.0", "babel-plugin-react-compiler": "^19.1.0-rc.2", "lodash.debounce": "^4.0.8", "next": "^15.3.5", "next-themes": "^0.4.6", "react": "^19.1.0", "react-dom": "^19.1.0", "three": "^0.178.0" }, "devDependencies": { "@dnd-kit/core": "^6.3.1", "@eslint/eslintrc": "^3.3.1", "@svgr/webpack": "^8.1.0", "@types/lodash.debounce": "^4.0.9", "@types/node": "^24.0.10", "@types/react": "^19.1.8", "@types/react-dom": "^19.1.6", "eslint": "^9.30.1", "eslint-config-next": "^15.3.5", "eslint-plugin-react-hooks": "^5.2.0", "next": "^15.3.5", "postcss": "^8.5.6", "prettier": "^3.6.2", "prettier-plugin-classnames": "^0.8.1", "prettier-plugin-merge": "^0.8.0", "prettier-plugin-tailwindcss": "^0.6.14", "react": "^19.1.0", "react-dom": "^19.1.0", "tailwindcss": "^4.1.11", "typescript": "^5.8.3" }, "prettier": { "plugins": [ "prettier-plugin-tailwindcss", "prettier-plugin-classnames", "prettier-plugin-merge" ] } }

Prettier configuration

Default

Steps to reproduce

Install the new React Compiler in a NextJS app and in the Next dev tool you'll see:

Showing \n newline characters causing a hydration mismatch

The current behavior

Hydration mismatch causing by newline characters

The expected behavior

Not to receive hydration errors

[ony3000]

Hello! Thanks for reporting the issue!

But I can't reproduce this issue. Can you provide more details?

[MichaelJOHare]

I wish I could, I just went through and tried reinstalling all dependencies in a new project and I didn't get the same error. It's weird though, if I put the plugins in package.json and let prettier format a file and hard refresh the dev server page I get this error every single time on my current project. If I remove the classnames and merge plugins and hard refresh the error goes away. And this started occurring directly after installing the React Compiler on the project without changing anything else.

I just can't seem to reproduce it in a test repo, so if you want you can probably go ahead and close this since it's most likely something weird on my end. In case your curious, this is the repo that reproduces it 100% of the time after just adding the plugins to package.json: https://github.com/MichaelJOHare/react-portfolio-website

[longfellowone]

Getting the same issues here as well