react-hook-mathjax The latex code is not being converted into Math formulas, on passing the latex text as input. It outputs empty span tags i.e(<span></span>)

import Tex2SVG, { MathJaxProvider } from "react-hook-mathjax"; const mathJaxOptions = { svg: { scale: 1, // global scaling factor for all expressions minScale: 0.5, // smallest scaling factor to use mtextInheritFont: false, // true to make mtext elements use surrounding font merrorInheritFont: true, // true to make merror text use surrounding font mathmlSpacing: false, // true for MathML spacing rules, false for TeX rules skipAttributes: {}, // RFDa and other attributes NOT to copy to the output exFactor: 0.5, // default size of ex in em units displayAlign: "center", // default for indentalign when set to 'auto' displayIndent: "0", // default for indentshift when set to 'auto' fontCache: "local", // or 'global' or 'none' localID: null, // ID to use for local font cache (for single equation processing) internalSpeechTitles: true, // insert

tags with speech content titleID: 0, // initial id number to use for aria-labeledby titles }, <mathjaxprovider options="{mathJaxOptions}"> <div classname="App"> <header classname="App-header"> <tex2svg display="flex" latex="e^{i \pi} + 1 = 0"></tex2svg> </header> </div> </mathjaxprovider> ```

Mar 08 '22 16:03 nishanth-masterji

@nishanth-masterji can you provide everything necessary for a full reproduction?

Mar 08 '22 16:03 jpribyl

import React, { useState, useEffect } from "react";
import Tex2SVG, { MathJaxProvider } from "react-hook-mathjax";

  const mathJaxOptions = {
    svg: {
      scale: 1, // global scaling factor for all expressions
      minScale: 0.5, // smallest scaling factor to use
      mtextInheritFont: false, // true to make mtext elements use surrounding font
      merrorInheritFont: true, // true to make merror text use surrounding font
      mathmlSpacing: false, // true for MathML spacing rules, false for TeX rules
      skipAttributes: {}, // RFDa and other attributes NOT to copy to the output
      exFactor: 0.5, // default size of ex in em units
      displayAlign: "center", // default for indentalign when set to 'auto'
      displayIndent: "0", // default for indentshift when set to 'auto'
      fontCache: "local", // or 'global' or 'none'
      localID: null, // ID to use for local font cache (for single equation processing)
      internalSpeechTitles: true, // insert <title> tags with speech content
      titleID: 0, // initial id number to use for aria-labeledby titles
    },
  };
return (
<>
<MathJaxProvider options={mathJaxOptions}>
            <div className="App">
              <header className="App-header">
                <Tex2SVG display="flex" latex="e^{i \pi} + 1 = 0" />
              </header>
            </div>
          </MathJaxProvider>
</>
)

//The above is the sample react code which I have used. Please have a look and let me know where I am doing wrong

Mar 08 '22 16:03 nishanth-masterji

Oh wow, missed your reply here somehow!

I have adapted your code into this and it seems to work for me on node 16 (looks like I may need to update deps for node 17

import React from "react";
import Tex2SVG, { MathJaxProvider } from "react-hook-mathjax";

export default function App() {
  const mathJaxOptions = {
    svg: {
      scale: 1, // global scaling factor for all expressions
      minScale: 0.5, // smallest scaling factor to use
      mtextInheritFont: false, // true to make mtext elements use surrounding font
      merrorInheritFont: true, // true to make merror text use surrounding font
      mathmlSpacing: false, // true for MathML spacing rules, false for TeX rules
      skipAttributes: {}, // RFDa and other attributes NOT to copy to the output
      exFactor: 0.5, // default size of ex in em units
      displayAlign: "center", // default for indentalign when set to 'auto'
      displayIndent: "0", // default for indentshift when set to 'auto'
      fontCache: "local", // or 'global' or 'none'
      localID: null, // ID to use for local font cache (for single equation processing)
      internalSpeechTitles: true, // insert <title> tags with speech content
      titleID: 0, // initial id number to use for aria-labeledby titles
    },
  };
  return (
    <>
      <MathJaxProvider options={mathJaxOptions}>
        <div className="App">
          <header className="App-header">
            <Tex2SVG display="flex" latex="e^{i \pi} + 1 = 0" />
          </header>
        </div>
      </MathJaxProvider>
    </>
  );
}

The output looks like this for me:

Does it work for you?

Jun 07 '22 05:06 jpribyl