Typesetting failed: Cannot read properties of null (reading 'nextSibling')

[JBR90]

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?

[fast-reflexes]

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 :)

[JBR90]

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 ?

[fast-reflexes]

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.

[fast-reflexes]

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 :)

[fast-reflexes]

@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.

[JBR90]

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

[fast-reflexes]

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 :)

[fast-reflexes]

I'll close this ticket for now @JBR90 , you can open it again if you can give me something to work with :)

[SergeyAlexeev]

@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:

[fast-reflexes]

@SergeyAlexeev these problems are impossible to troubleshoot without some concrete example where the error can be reproduced. The message in the call stack comes from Mathjax itself, not from better-react-mathjax and all I can say is that I believe there is probably some glitch somewhere which can be fixed so that it works. If it appears in prod but not in dev, what if you run production code locally, does it appear then? Maybe some build step optimizes the output code in some way which changes the server-client context?

If you REALLY wanna troubleshoot it yourself, start with a super simple example (like the brm-example repo I have added a link to above) and then gradually transform that project into yours, piece by piece, and see where the error starts occurring. Then you will probably have a pretty good idea what's causing the problem but in PRINCIPLE there shouldn't be a problem using this lib in newest NextJS. If you find out what it is, feel free to post here :)

You can also give me access to your project if you want to but I'm not sure I will have the time to deep dive into it right now, given that the problem sounds a bit intricate only showing in production and not in dev.

'd be super happy to help out if you could present the problem in some way that's easier for me to work with :)

[shincap8]

I just experienced this error after updating some dependencies using yarn, once I went back to the old yarn file it stopped throwing the error. I haven't been able to check which update in particular is the one causing it.

[mantagen]

@fast-reflexes alongside the nextSibling errors, we're also getting these (which by frequency seem to be linked):

Error Typesetting failed: [object Event] 

Would be good if this line could handle more different error cases, because currently something is throwing which doesn't have a message (so likely not an Error). Surfacing the thrown value could provide insight into what's causing these errors.

https://github.com/fast-reflexes/better-react-mathjax/blob/48f6ad4677a6f36e704e3747d0e0a89500352cd7/src/MathJax/MathJax.tsx#L13

[fast-reflexes]

I totally agree with that @mantagen , will push a fix for that so that a more meaningful message can be printed.

An important difference here is that the message you show come from this library whereas the other error comes from the Mathjax library.

Also, to anyone participating in this thread, it would be really valuable if you can set up a toy repo where the error can be shown. I know it takes some time but that's the only way to fix errors like this, either by means of education or corrected code. It's impossible for me to troubleshoot things otherwise. For example, @shincap8 , if you have dependencies where this happens, clone your repo and make a minimal example where it still fails (just remove as much code as you can until it stops failing, then readd some) and give me access.

I personally have a project which uses this library and which is deployed in production on an up-to-date NextJS server and it works perfectly so I have no way of recreating errors if you can't supply input.

Thanks :)

[JBR90]

@fast-reflexes - We are now getting Typesetting failed: undefined is not an object (evaluating 'e.startup') after @mantagen suggested change. Does this help with getting to the bottom of this error ?

thanks

[fast-reflexes]

You have to provide a reproducible sample, otherwise I can't help you.

Also, you can't have server-side rendering with this library, only client-side. Let me know if you can set up a toy repo where the error shows.