-
-
Notifications
You must be signed in to change notification settings - Fork 54
-
-
Notifications
You must be signed in to change notification settings - Fork 54
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.
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
Next.js hydration issue #80
Comments
This error disappears when commenting out lines 113-115 in https://github.com/remarkjs/remark-math/blob/7e82f934e77d62b7366825633bc7f1d5d5e5a861/packages/rehype-mathjax/lib/create-plugin.js if (found && renderer.styleSheet) {
context.children.push(renderer.styleSheet())
} Though it's still unclear where the root cause is |
well, the root cause is that there is different handling on the server (JSDOM) and a browser (depending on which one your users use). Not sure it can be change,d but feel free to investigate it. |
I'm having this problem too. One thing I've noticed is that if you inspect a mathjax-generated element, you'll see something like this: It should say |
That seems like a very different problem? The above seems to talk about CSS, you seem to talk about (MathML) attribute conversion? |
I'm not talking about MathML, at least I don't think I am. I'm talking about how rehype-mathjax renders the HTML. Just suggesting a possible cause of the hydration error. If somehow it was being rendered as "class" on the server but "classname" on the client, I think that could cause the hydration error. Interestingly, when I commented out the lines OP suggested, I still got the error. If I switch to rehype-katex the problem goes away. |
oh sorry yeah you’re right,
Yeah, I thought it was a different problem, and this seems to indicate that.
It does thing completely differently! |
Can confirm this issue still exists with Next.js 14 |
Can confirm that this solution that avoids adding the css appears to work. |
Initial checklist
Affected packages and versions
remark-math, rehype-mathjax, all latest versions
Link to runnable example
No response
Steps to reproduce
yarn create next-app
yarn add @next/mdx @mdx-js/loader @mdx-js/react remark-math rehype-mathjax
create a
next.config.mjs
with the contents:Expected behavior
Should render without errors.
Actual behavior
Renders correctly, but with the error
Error: Text content does not match server-rendered HTML.
Runtime
Node v16
Package manager
yarn 1
OS
macOS
Build and bundle tools
Next.js (bug is seen on both v13 and v12)
The text was updated successfully, but these errors were encountered: