Runtime error in nextjs

[HamzahSCIT]

I suddenly started getting this error when navigating between pages. I have a table that is using the MathJax component and when I navigate to the next page, it gives me this error, when I reload then it renders correctly. Then it happens again on navigation. Any ideas?

[fast-reflexes]

Hmmm sounds like some effect executes when the component has unmounted ... could you provide your MathJaxContext config and IF POSSIBLE a small reproducible sample of this?

[HamzahSCIT]

const mathjax_config = {
  "fast-preview": {
    disabled: true,
  },
  tex2jax: {
    inlineMath: [
      ["$", "$"],
      ["\\(", "\\)"],
    ],
    displayMath: [
      ["$$", "$$"],
      ["\\[", "\\]"],
    ],
  },
  messageStyle: "none",
  inline: true,
};

export default function App({ Component, session, pageProps }: AppPropsWithLayout) {
  const renderWithLayout =
    Component.getLayout ||
    function (page: ReactElement) {
      return (
        <section className={font.className}>
          <SessionProvider session={session}>
            <MathJaxContext
              version={2}
              renderMode="pre"
              config={mathjax_config}
              onStartup={(mathJax) => (mathJax.Hub.processSectionDelay = 0)}
            >
              <DefaultLayout>{page}</DefaultLayout>
            </MathJaxContext>
          </SessionProvider>
        </section>
      );
    };

  return (
    <section className={font.className}>
      <SessionProvider session={session}>
        <MathJaxContext
          version={2}
          hideUntilTypeset="every"
          renderMode="post"
          config={mathjax_config}
          onStartup={(mathJax) => (mathJax.Hub.processSectionDelay = 0)}
        >
          {renderWithLayout(<Component {...pageProps} />)}
        </MathJaxContext>
      </SessionProvider>
    </section>
  );
}

[fast-reflexes]

Which of these configs is actually in use and why do you need to support both v2 and v3? If Component.getLayout is every falsy, it should all fail since better-react-mathjax doesn't support 2 MathJaxContexts with different MathJax versions.

[HamzahSCIT]

Apologies I copied that code in a hurry, we are using version 2 in both.

[HamzahSCIT]

Also the dev who worked on this isnt with the company anymore but his commit message says this was done like this for a reason

[fast-reflexes]

Ok but are you using two contexts? It's enough with the lower one, no need to include it twice. Also I need some reproducible sample, I have used this library in NextJS 11, 12, 13 and 14 without any problems so you're likely doing something that can be done differently :)

[fast-reflexes]

Please provide more information on this or I will close it in a few days. You can also show me how you're using the MathJax components or provide a sandbox where this error shows. You're likely using the MathJax component in some way causing this problem. Try to move it around a bit (you can wrap larger portions of the DOM in a MathJax component too so you can move it around a bit and fiddle around to see if the problem disappears). Use in NextJS should not be a problem however. You can however only use a MathJaxContext and MathJax component in a client components. Here is an example of how to set it up in NextJS 14.. will add info on this in the readme:

https://github.com/fast-reflexes/brm-example

I will close this ticket in a few days if no new info comes in :)

[rizwanad]

Hey @fast-reflexes sorry for reply bit late, I have attached the Stack trace screenshot.. If that could not help .. do let me know I will try my best to help you. But the application is live and our business is suffering due to that. Thanks!

Context: We have an ed-tech platform, there is quiz module that break on some questions when I reload the same question again it renders perfectly fine. So I could not find the actual pattern that why it throws this error but somehow this math component has some issue.

[fast-reflexes]

The stack trace comes directly from Mathjax and doesn't say much. Please look into what I wrote above:

• You shouldn't have both v 2 and v 3 in the same app (but it seems you don't have that, just making sure)
• You should wrap your entire app in ONE MathJaxContext that doesn't mount and unmount, any other usage is incorrect. Follow the instructions here: https://github.com/fast-reflexes/better-react-mathjax?tab=readme-ov-file#usage

If the problem persists give me access to the repo so I can have a look.

[fast-reflexes]

If you can't provide more input than just pasting an error message, then I will close this thread. You have to put in some time as well to troubleshoot and try different things in order for me to spend time helping you, otherwise I can't do anything, sorry.

You need to follow the instructions above and then, if the issue is not solved, clone the project into a new repo and then remove as much code as possible while preserving the error, and then invite me to the repo so I can reproduce the error. Will close in a few days if no new input is added.