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

[nishanth-masterji]

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
},

```

[jpribyl]

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

[nishanth-masterji]

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

[jpribyl]

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?