ES6 class keyword used in "ES5" code due to bundled speech-rule-engine dependency

[hallvors]

Hi, I came across an issue that causes a syntax error if one tries to use MathJax with the PrinceXML JavaScript engine. I suppose it will also cause trouble in many other older browser that do not support ES6 class.

prince: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js:1: error: SyntaxError: unexpected token reserved("class")

It is a little confusing that a URL which contains the string "es5" uses the class keyword :) .

I checked out the repository and the TS compiler does not output class statement anywhere if I run npm run compile. However, the make-components command that uses Node.js scripts and Webpack to compile all the sub-components MathJax consists of, unfortunately outputs stuff like

class Q extends o.AbstractAudioRenderer {

or

e.Span = class {

Now, there's no MathJax component defining an AbstractAudioRenderer. This seems to come from a dependency which gets bundled into the Mathjax scripts by Webpack (but not compiled / transpiled to ES5 in the process - Webpack configurations tend to assume stuff in dependencies does not need transpiling). The dependency that ships ES6 code which gets bundled is most likely https://www.npmjs.com/package/speech-rule-engine

Is it possible to enable Babel loader or similar transpiling for this dependency? I know it works as-is with most browsers out there, but at least the URL saying es5 would be more truthful if it were possible to also transpile speech-rule-engine :)

Thanks for your attention and the amazing library.

[dpvc]

Thanks for reporting this issue. You are correct that the speech-rule-engine is the culprit, here, and should be transpired for the es5 directory.

One work-around for now would be to edit components/webpack.common.js and change

https://github.com/mathjax/MathJax-src/blob/8565f9da973238e4c9571a86a4bcb281b1d98d9b/components/webpack.common.js#L135-L136

to

      test: new RegExp(dirRE + quoteRE(path.sep) + '.*\\.js$|speech-rule-engine'),
      exclude: new RegExp(quoteRE(path.join(path.dirname(__dirname), 'es5') + path.sep) + '|.json$'),

which will cause the speech-rule-engine files to be transpired, excluding its .json files. Then repack the needed component:

components/bin/makeAll components/src/tex-svg

That seems to do the trick in my (limited) testing.

[dpvc]

I take it back. While the resulting file doesn't include class definitions, it also doesn't work in the browser. So I'll have to look into it further.

[dpvc]

OK, it looks like you also need to

npm install regenerator-runtime

and change

https://github.com/mathjax/MathJax-src/blob/8565f9da973238e4c9571a86a4bcb281b1d98d9b/components/webpack.common.js#L163

to

    entry: ['regenerator-runtime/runtime.js', path.join(dir, name + '.js')],

then it seems to work. It also increases the size of the resulting file by 300K or so (unfortunately).

[OscarTheFabulous]

Hi! I'm having this issue with PrinceXML and MathJax, same error, same everything. Is there a fix available for this?

[dpvc]

@OscarTheFabulous, did you try the suggestions that I made above? I gave a work-around in my comments (but be sure to read them all, as they are spread over several).

Alternatively, you could try MathJax v4, now out in beta, which provides both ES6 and ES5 versions. The speech-rule-engine has been updated to compile into both forms.

[OscarTheFabulous]

@dpvc Sorry, I haven't, it all seemed a bit too complicated for me 👉👈. Instead, I decided to save the page as html using Chromium before saving it as pdf.