After implementing MathJax in my learning management project, Equations are coming fine on local but on live it’s causing issues

  Kiến thức lập trình

MathJaxWrapper is what i’m using for rendering my math equations,
Now the catch is this the project runs fine on local and live as well. Say a teacher or admin logs in on live. the equations are coming fine but when a student logs in the equations are not being processed by the library.

this is my component

import { MathJaxContext, MathJax } from 'better-react-mathjax'

// Set up a default configuration for MathJax
const mathJaxConfig = {
  loader: { load: ['input/tex', 'output/chtml'] },
  tex: {
    inlineMath: [
      ['$', '$'],
      ['\(', '\)']
    ],
    displayMath: [
      ['$$', '$$'],
      ['\[', '\]']
    ]
  },
  chtml: { displayAlign: 'center', scale: 1 } // Customize output settings
}

const MathJaxWrapper = ({ children }: any) => (
  <MathJaxContext version={3} config={mathJaxConfig}>
    <MathJax>{children}</MathJax>
  </MathJaxContext>
)

export default MathJaxWrapper

and this is where it is called in the components

{currentQuestionAnswer?.answer === value.v && <CheckIcon />}
                    <MathJaxWrapper>
                      <p dangerouslySetInnerHTML={{ __html: value.d?.text }} />
                    </MathJaxWrapper>

before this we were just rendering the text and this was the code

<MarkdownV2 maxWidth="250px">
                      {value.d.text
                        ? getReplaceImage(
                          value.d.text
                            .replace(/\/g, '')
                            ?.replaceAll(/(?<!<)//g, '')
                            ?.replaceAll(/[{}]/g, '')
                            ?.replaceAll(/tex/g, '$$$')
                            ?.replaceAll(/'/g, ''),
                          currentSection?.[
                            currentSection.findIndex(
                              (question) =>
                                question.questionId === currentQuestionId
                            ) ?? 0
                          ]?.solutionImages
                        )
                        : ''}
                    </MarkdownV2> 

image renderd in student view
this same thing is wokring fine in my local but on live this is how it is coming

here’s the code from devloper console

<span class="math display">$$2pisqrt{frac{left( x_{1}^{2} +
x_{2}^{2} right)}{left( v_{1}^{2} + v_{2}^{2} right)}}$$</span>

here’s the screenshot from my local

rendered ui in admin view
here’s the code from dev console

<span class="math display"><mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" display="true" tabindex="0" ctxtmenu_counter="19" style="font-size: 113.9%; position: relative;"><mjx-math display="true" class="MJX-TEX" aria-hidden="true" style="margin-left: 0px; margin-right: 0px;"><mjx-mn class="mjx-n"><mjx-c class="mjx-c32"></mjx-c></mjx-mn><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D70B TEX-I"></mjx-c></mjx-mi><mjx-msqrt><mjx-sqrt class="mjx-tall"><mjx-surd><mjx-mo class="mjx-n"><mjx-stretchy-v class="mjx-c221A" style="height: 3.6em; vertical-align: -1.05em;"><mjx-beg><mjx-c></mjx-c></mjx-beg><mjx-ext><mjx-c></mjx-c></mjx-ext><mjx-end><mjx-c></mjx-c></mjx-end><mjx-mark></mjx-mark></mjx-stretchy-v></mjx-mo></mjx-surd><mjx-box style="padding-top: 0.446em;"><mjx-mfrac><mjx-frac type="d"><mjx-num><mjx-nstrut type="d"></mjx-nstrut><mjx-mrow><mjx-mo class="mjx-sop"><mjx-c class="mjx-c28 TEX-S1"></mjx-c></mjx-mo><mjx-msubsup><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D465 TEX-I"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.297em; margin-left: 0px;"><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c32"></mjx-c></mjx-mn></mjx-texatom><mjx-spacer style="margin-top: 0.18em;"></mjx-spacer><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c31"></mjx-c></mjx-mn></mjx-texatom></mjx-script></mjx-msubsup><mjx-mo class="mjx-n" space="3"><mjx-c class="mjx-c2B"></mjx-c></mjx-mo><mjx-msubsup space="3"><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D465 TEX-I"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.297em; margin-left: 0px;"><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c32"></mjx-c></mjx-mn></mjx-texatom><mjx-spacer style="margin-top: 0.18em;"></mjx-spacer><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c32"></mjx-c></mjx-mn></mjx-texatom></mjx-script></mjx-msubsup><mjx-mo class="mjx-sop"><mjx-c class="mjx-c29 TEX-S1"></mjx-c></mjx-mo></mjx-mrow></mjx-num><mjx-dbox><mjx-dtable><mjx-line type="d"></mjx-line><mjx-row><mjx-den><mjx-dstrut type="d"></mjx-dstrut><mjx-mrow><mjx-mo class="mjx-sop"><mjx-c class="mjx-c28 TEX-S1"></mjx-c></mjx-mo><mjx-msubsup><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D463 TEX-I"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.297em; margin-left: 0px;"><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c32"></mjx-c></mjx-mn></mjx-texatom><mjx-spacer style="margin-top: 0.18em;"></mjx-spacer><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c31"></mjx-c></mjx-mn></mjx-texatom></mjx-script></mjx-msubsup><mjx-mo class="mjx-n" space="3"><mjx-c class="mjx-c2B"></mjx-c></mjx-mo><mjx-msubsup space="3"><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D463 TEX-I"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.297em; margin-left: 0px;"><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c32"></mjx-c></mjx-mn></mjx-texatom><mjx-spacer style="margin-top: 0.18em;"></mjx-spacer><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c32"></mjx-c></mjx-mn></mjx-texatom></mjx-script></mjx-msubsup><mjx-mo class="mjx-sop"><mjx-c class="mjx-c29 TEX-S1"></mjx-c></mjx-mo></mjx-mrow></mjx-den></mjx-row></mjx-dtable></mjx-dbox></mjx-frac></mjx-mfrac></mjx-box></mjx-sqrt></mjx-msqrt></mjx-math><mjx-assistive-mml unselectable="on" display="block"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><mn>2</mn><mi>π</mi><msqrt><mfrac><mrow data-mjx-texclass="INNER"><mo data-mjx-texclass="OPEN">(</mo><msubsup><mi>x</mi><mrow data-mjx-texclass="ORD"><mn>1</mn></mrow><mrow data-mjx-texclass="ORD"><mn>2</mn></mrow></msubsup><mo>+</mo><msubsup><mi>x</mi><mrow data-mjx-texclass="ORD"><mn>2</mn></mrow><mrow data-mjx-texclass="ORD"><mn>2</mn></mrow></msubsup><mo data-mjx-texclass="CLOSE">)</mo></mrow><mrow data-mjx-texclass="INNER"><mo data-mjx-texclass="OPEN">(</mo><msubsup><mi>v</mi><mrow data-mjx-texclass="ORD"><mn>1</mn></mrow><mrow data-mjx-texclass="ORD"><mn>2</mn></mrow></msubsup><mo>+</mo><msubsup><mi>v</mi><mrow data-mjx-texclass="ORD"><mn>2</mn></mrow><mrow data-mjx-texclass="ORD"><mn>2</mn></mrow></msubsup><mo data-mjx-texclass="CLOSE">)</mo></mrow></mfrac></msqrt></math></mjx-assistive-mml></mjx-container></span>

I imported the library on my front end and and set the components just like described in the docs.
the code it totally working fine in my local, including student view.

but on live only the admin view is working not the student view.

I tried debuggin but couldn’t find any flaw in my code.

New contributor

Ravi Sen is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

LEAVE A COMMENT