Typesetting failed: Cannot read properties of null (reading 'nextSibling')
JBR90 opened this issue · 15 comments
Hi we have implemented mathjax but getting a lot of these errors on pages (whether they have mathjax syntax or not).
have not been able to reproduce the error locally and maxjax appears to be rendering correctly.
Typesetting failed: Cannot read properties of null (reading 'nextSibling')
We are self hosting MathJax 3 and have MathJaxContext context wrap a next.js page.
<MathJaxContext version={3} src={"/mathjax/tex-mml-chtml.js"}>
Within the page there are multiple MathJax components
<MathJax hideUntilTypeset="every" dynamic>
Can you help with what could be causing these errors?
Hi there!
I've never encountered such an error :( I assume you can't reproduce this in a sandbox?
I have a project myself where I use NextJS and where I have a self-hosted copy of MathJax which works great so something must be wrong.
First of all, if you remove the src attribute and let it fetch MathJax from a CDN, does it work then? If it still doesn't work, try to temporarily remove as much as you can from the page in question and from _app and _document files until it works. Remove all additional settings on any MathJax or MathJaxContext component and stay with just one very simple math piece (like $$10 + 10$$). Once it works, add stuff back until the problem shows. Then maybe I can understand what it's more about.
Best would of course be if you could provide me with a sandbox or a repo where I can see the problem :)
Hi thanks for getting back to me,
We have the MathJax rendering successfully and i don't this error is visually effecting users, i've not been able to reproduce locally, a lot of these errors are coming through to our bug reporting software though.
We initially set up using the CDN but we were seeing the error below so we decided to host ourself.
Failed to download MathJax version 3 from 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.js' due to: [object Event]
"NextJS and where I have a self-hosted copy of MathJax"
Do you have an example of this project ?
Seems there is something in your setup disturbing things. I can set up an example of the project if you want. The project I have is private so I can't share that but I can swiftly set up a new project and do it. I'll get back to you tonight.
Here is a git repo that works great for me: https://github.com/fast-reflexes/brm-example
I just initialized a new NextJS project, removed all the stuff from the starting page and added math. The only small caveat was that NextJS now uses server and client code and MathJax should never run on the server. In older versions of NextJs this works anyways (React functions are available in the SSR process as well even though they might not do anything and for example some hooks are never executed on the server) but now I got a complaint about createContext not existing. SO just took 10 minutes to read up on it on https://nextjs.org/docs/app/building-your-application/rendering and then it worked great. I also added self-hosted MathJax which is in the committed code as well (but it works with CDN too). Hope it can shed some light on what's wrong in your setup :)
@JBR90 let me know if I can help you in any other way, otherwise let's close this ticket. I'd be happy to assist you if you can provide anything for me to work with.
Thanks for getting back to me with the example. I tried moving the context into a provider component with the explicit "use client", other than that the set up was the same except we are wrapping MathJax around html rather then just the mathjax syntax. It's mostly render fine but we are now seeing occasional Typesetting failed: null has no properties error
HTML is fine in a MathJax component.
So are you also making sure that no MathJax component is rendered on the web server? They should also all be in client parts of the tree? Haven't looked into it but it sounds like the mathjax context provides null instead of a mathjax object because there is no context on the server and then if a MathJax component tries to render on the server, you could run into this error ...
Also, I took the opportunity to improve some error handling since some of the messages you provided were poor in content so that's an improvement resulting from your input :)
I'll close this ticket for now @JBR90 , you can open it again if you can give me something to work with :)
@JBR90 did you solve the issue?)) I've got the same one and I don't have server-side rendering.
BTW: I can't reproduce it in localhost in dev mode, but it appears in production.
@fast-reflexes Call stack looks like below:
