7525633427
### What When you have bad nesting html in your React code, React wil raise hydration error since the browser html parser might parse it to sth else different comparing to server html on client. Previously we're display only the warning in the error description in dev overlay. Now we introduced another format of displaying pesudo html that representing your code, with highlighting the html tag that causes the error. Since React might gives you the whole component stack of React tree, so we also introduced a way that can collapse the error. #### Example https://github.com/vercel/next.js/assets/4800338/622122d6-4d2e-4c8e-95e8-4864343e478b ### Why The reason we added this is that even we show the html diff, it could super large due to React ordering the html on client, so the mismatch might be a lot. The idea here is similar to what you saw when you passed down a bad event handler into server component, we displayed a pesudo html as it could hit your mind faster than just seeing the warning. The best way is to display the source code, but before we can show the source, getting component stack display as pseudo html instead of here could be more helpful. ### After vs Before <img width="400" src="https://github.com/vercel/next.js/assets/4800338/714119ad-ff23-46a9-bc5a-5601eb390e71"> <img width="400" src="https://github.com/vercel/next.js/assets/4800338/575f95fa-889e-4cee-ad19-9c2fea06519a"> Closes NEXT-2621 |
||
---|---|---|
.. | ||
.stats-app | ||
development | ||
e2e | ||
examples | ||
integration | ||
lib | ||
production | ||
unit | ||
.gitignore | ||
build-turbopack-tests-manifest.d.ts | ||
build-turbopack-tests-manifest.js | ||
get-test-filter.js | ||
jest-setup-after-env.ts | ||
ppr-tests-manifest.json | ||
readme.md | ||
test-file.txt | ||
tsconfig.json | ||
turbopack-tests-manifest.json |