javascript – Can MathJax be imported to a JS file used by a local HTML document?

On the MathJax homepage, we find the code to import the tex-mml-chtml configuration directly into an HTML document, without any need for a server. Attempting to modify the example on jsbin below the boilerplate slightly, I separated the import statement into JS and HTML files on my local machine:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>MathJax example</title>
  <script id="main"
          type="module"
          src="main.js">
  </script>
</head>

<body>
<p>
  When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
  \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
</p>
</body>
</html>

main.js

import * as jax from "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";

I get the following errors:

console errors

and a warped output, although it does still make an attempt:

warped output

I am not sure if this outcome is because we simply cannot use MathJax in this manner (the proper manner being a call in the source HTML document, or via a server), or rather because I am missing some JS, or because I am calling the wrong configuration, etc.

If this is not possible, an explanation of why not (perhaps some CORS machinery? using JS modules incorrectly? MathJax simply not designed that way?) would be appreciated!

Read more here: Source link