How to use MathJax V3 in React now?

[wooloba]

It appears most react-mathjax is not working anymore. Is there another way to use MathJax V3 in react app?

I assume I could start with hosting my Own Copy of MathJax. But,

1. what do I need to import. 2. how should I import using ES6?

Another question is will V3 of MathJax affect any third-library extensions?

[wooloba]

UPDATE: So, I tried to write a vanilla version of React+MathJax. It is not working and the error message is
node-main.js:1429 MathJax(?): Can't find handler for document
App.js:35 Cannot read property 'tex2svg' of undefined

And my App.js is following:

import React from 'react';
class App extends React.Component {
	constructor() {
		super();
		this.state = {
			math: ''
		}
	}

	componentDidMount() {
		const option = {
			extensions: ["tex2jax.js"],
			jax: ["input/TeX", "output/SVG"],
			"SVG": {
				styles: {".MathJax_Preview": {visibility: "hidden"}}
			},
			tex2jax: {inlineMath: [["$", "$"], ["\\(", "\\)"]]},
			TeX: {extensions: ["[Extra]/annotations.js", "AMSmath.js", "AMSsymbols.js"]}
		};
		require('mathjax').init({
			loader: option
		}).then((MathJax) => {
			const svg = MathJax.tex2svg('\\\\frac{1}{x^2-1}');
			this.setState({
				math: svg
			})
		}).catch((err) => console.log(err.message));
	}

	render() {
		console.log(this.state.math);
		return (
			<div>
				{this.state.math}.
			</div>
		)
	}
}
export default App;

Is there any wrong with my code? Should I give MathJax more information?

Thank you.

[dpvc]

The main issue that I see is that you are using a version 2 configuration block rather than a version 3 one, and they aren't interchangeable. You can use the configuration converter to help you convert from v2 to v3 configurations.

So you might try

	componentDidMount() {
		require('mathjax').init({
			loader: {
				load: ["input/tex", "output/svg"]
			},
			tex: {
				inlineMath: [["$", "$"], ["\\(", "\\)"]],
				packages: ['base', 'ams']
			}
		}).then((MathJax) => {
			const svg = MathJax.tex2svg('\\frac{1}{x^2-1}');
			this.setState({
				math: svg
			})
		}).catch((err) => console.log(err.message));
	}

Note that your [Extra]/annotations.js will need to be rewritten to be compatible with version 3, so I've left it out for now. Also, styles configurations are no longer allowed in v3, so you need to include that in your own style sheets. But since MathJax v3 doesn't do previews, the style that you were setting is not applicable to version 3 any longer.

Finally, I removed \\ from the math that you are translating, as I suspect you want to translate the TeX expression \frac{1}{x^2-1}.

See if that works for you.

[dpvc]

how should I import using ES6?

It is true that the documentation for direct calls to MathJax modules (i.e., not using MathJax Components) is still under construction, so there isn't much to go on. There are examples in the MathJax Node Demos repository, but most use require rather than import. Some could be converted fairly easily, but some do rely on the fact that require() is performed at the at the location in the code where it occurs; since all import commands are performed before code executes, some of the examples would have to be modified to put additional code into external .js files that are imported in order to get the timing of executing correct. That could certainly be done, and the rest of the examples would be correct for how to use the imported modules.

will V3 of MathJax affect any third-library extensions?

Yes. The underlying code for version 3 is completely different from version 2 (a total rewrite), and since extensions rely on the v2 structure, they will not be directly compatible with v3, and will have to be converted to the new API. Again, there is not yet much documentation on that, but there is an example of a custom TeX extension in the node demos repository linked above, so that might give you some ideas for how to do that.

[wooloba]

Thank you very much. It is very useful.
I have decided to keep using version 2 for now because one extension my project heavily depends on is Xyjax which is impossible for me to rewrite it.