Open Talaxy009 opened 1 year ago
first of all thanks for the test repo , it helped !
please visit below linked gatsby docs page. https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#replaceHydrateFunction
In the gatsby-browser file add replaceHydrateFunction . To be safe also do a gatsby clean and then build & serve . Tested this on the test repo you provided , it fixed the issues . make sure to import the ReactDOM .
I don't think type:bug is the correct label for this. this existed for quite some time .
import React from "react"
import { Layout } from "./src/components/layout"
import ReactDOM from "react-dom/client";
export const wrapPageElement = ({ element, props }) => {
return <Layout {...props}>{element}</Layout>
}
export const replaceHydrateFunction = () => {
return (element, container) => {
const root = ReactDOM.createRoot(container)
root.render(element)
}
}
@808vita Thanks for your reply. I don't think replacing the react hydrate function is a good way to fix this bug, it's more like hiding it, not to mention that we will lose SSR/SSG functionality in this way. Since this issue has been marked as confirmed, I hope it will be fixed.
Preliminary Checks
Description
Hydration fails when using remark plugins in gatsby-plugin-mdx.
I have create a repo which is base on using-mdx example and add a local remark plugin in it to reproduce this issue, you can find the link below. The local remark plugin only does one thing: replace link nodes with html nodes.
Reproduction Link
https://github.com/Talaxy009/gatsby-test
Steps to Reproduce
Expected Result
No hydration error.
Actual Result
Hydration error after page reload.
Environment
Config Flags
DEV_SSR: true