Skip to content

[Blog] Fix React hydration errors (#418/#423) on blog pages #8072

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sarajkrishnasingh merged 6 commits into from
Sep 21, 2026
+447 −14
Merged

[Blog] Fix React hydration errors (#418/#423) on blog pages #8072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
59b91a0
fix: eliminate React hydration errors on blog pages
leecalcote Sep 14, 2026
090a652
Merge branch 'master' into work/busy-cannon-vsy1cj
marblom007 Sep 18, 2026
1b4e356
fix: emit the table structure the HTML parser implies
leecalcote Sep 18, 2026
18ba1af
fix: close three gaps in the DOM nesting transform
leecalcote Sep 18, 2026
f1bb801
fix: split paragraph components around block content too
leecalcote Sep 18, 2026
8064f22
fix: keep separating whitespace when splitting a paragraph component
leecalcote Sep 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions gatsby-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const {
getExcludedCollections,
isFullSiteBuild,
} = require("./src/utils/build-collections");
const rehypeFixDomNesting = require("./rehype-fix-dom-nesting");

const isDevelopment = process.env.NODE_ENV === "development";
const isProduction = process.env.NODE_ENV === "production";
Expand Down Expand Up @@ -513,6 +514,11 @@ module.exports = {
options: {
extensions: [".mdx", ".md"],
gatsbyRemarkPlugins: [],
mdxOptions: {
// Keeps MDX from emitting block-level content inside <p>, which the
// browser's parser re-shapes and React then fails to hydrate.
rehypePlugins: [rehypeFixDomNesting],
},
},
},
{
Expand Down
Loading
Loading