Issue with Fonts and Local MathJax Files

[Cobular]

Hey!
So I'm trying to use this in an extension, and that requires there to be no requests to outside scripts that are executed, meaning I can't rely on a CDN for mathjax. I'm trying to use the src prop on the MathJaxContext component to make this work. MathJax itself works, however I can't get the required fonts to load. It expects fonts to be at output/chtml/fonts/woff-v2/, and technically I could put them there, but I'd really prefer not to and for there to be some better approach. Any ideas?

My MathJaxContent:

<MathJaxContext
  onError={(error) =>
    console.error("Mathjax has failed to load!" + error)
  }
  config={config}
  hideUntilTypeset={"every"}
  src={"./mathjax-tex-chtml-full.min.js"}
>
  ...
</MathJaxContext>

Thanks a bunch for making this, it's been quite useful for me!

[fast-reflexes]

Hi there!

Thanks for opening the first issue 🎉 🎈 and for using this library!

Now, regarding your issue, MathJax needs a bunch of assets other than the main file that is downloaded initially and this is just how it is, no matter if you host it yourself or if you use a cdn. You can see in the development tools even if you use a cdn that other assets, such as fonts, are downloaded as well. Nonetheless this is simple to do locally too so no worries. MathJax fetches one file initially which then references other assets within the source code so if you follow the instructions below but still have problems, you might wanna look into your folder structure and make sure that relative references from the initial MathJax file works as they should.

1. Download MathJax from https://github.com/mathjax/MathJax. You can download the latest by using the command git clone https://github.com/mathjax/MathJax.git mathjax (as suggested in http://docs.mathjax.org/en/latest/web/hosting.html) or simply browse the repo and download the zip you need (for example, to download MathJax 2.7.9, go to https://github.com/mathjax/MathJax/releases/tag/2.7.9 and click Source code (.zip)).

2. Now extract MathJax. In the case of MathJax 3, copy the CONTENTS of the folder named es5 into a directory mathjax in your public / static assets folder in your project. In the case of MathJax 2, copy the all the CONTENT of the extracted folder into this same folder (to be clear, you put EITHER MathJax 2 OR MathJax 3 in this public folder, not both).

3. The final step is simply to determine which file to import. If you check https://www.mathjax.org/#gettingstarted, you can see what files are imported when using a cdn. For MathJax 3 this is tex-mml-chtml.js and for MathJax 2 it is MathJax.js?config=TeX-AMS-MML_CHTML. Now simply make sure that the mathjax folder that we copied into in step 2 is located at the root level of your public / static directory and add version={3} src={"/mathjax/tex-chtml.js"} to your MathJaxContext to use MathJax 3 and version={2} src={"/mathjax/MathJax.js?config=TeX-MML-AM_CHTML"} if you downloaded MathJax 2. This assumes basic usage, there might be rare cases when you would have to load a different base file even if you used MathJax outside of better-react-mathjax and React and in that case, you would have to load a different file here as well but it all comes down to the configuration in use and typically, the procedure described here should be enough.

Remember that MathJax 2 takes up much more space than MathJax 3 so it might be a good idea to use MathJax 3 when hosting your local copy.

I've verified this setup locally and it works for both MathJax 2 and 3 but let me know if you need a sandbox as inspiration :)

[giovannicimolin]

@fast-reflexes @Cobular We recently started using this library and came across the same problem.

We found another solution that let us install mathjax through package.json though. 😁

If you use webpack and have your webpack configuration file exposed, you can use CopyWebpackPlugin to copy over the files to the build directory. This is the code we're using:

const CopyPlugin = require('copy-webpack-plugin');
const rootPath = path.join(__dirname);

module.exports = {
    ...
   plugins: {
        ...,
            new CopyPlugin([
                { from: path.join(rootPath, 'node_modules/mathjax/es5'), to: 'assets/mathjax' },
            ])
    }
};

Our provider looks like this:

<MathJaxContext 
    src={"/assets/mathjax/tex-chtml.js"}
    version={3} 
    config={mathJaxOptions}
>

[fast-reflexes]

Looks good! :) 👍 Thanks for contributing!

[binhtran04]

CopyWebpackPlugin

How can I achieve something like this, but for Vite?

[fast-reflexes]

I would still recommend storing the MathJax files in your public folder and then access them via the src attribute of the MathJaxContext. Should be platform agnostic and work on Vite too! I mean just copying them manually... not a complicated step.

[binhtran04]

I would still recommend storing the MathJax files in your public folder and then access them via the src attribute of the MathJaxContext. Should be platform agnostic and work on Vite too! I mean just copying them manually... not a complicated step.

Thanks @fast-reflexes for the recommendation.
I want to manage MathJax lib properly in package.json, so I hesitated to do the manual copy.
Anyways, I found the solution for Vite too. It's quite easy actually

import mathJaxURL from "mathjax-full/es5/tex-svg.js?url";
...

<MathJaxContext src={mathJaxURL}>
...
</MathJaxContext>

[fast-reflexes]

Great! haha. this was just also mentioned in another ticket: #44 (comment) :)

What a coincidence :)