Closed HamzahSCIT closed 2 months ago
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?
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>
);
}
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 MathJaxContext
s with different MathJax versions.
Apologies I copied that code in a hurry, we are using version 2 in both.
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
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 :)
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 :)
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.
The stack trace comes directly from Mathjax and doesn't say much. Please look into what I wrote above:
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#usageIf the problem persists give me access to the repo so I can have a look.
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.
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?