Conditionally rendering mathJax is broken, after removing babel-polyfill from app.jsx

[hardyoyo]

Scenario: we first turn off typesetting on page load via our MathJax configuration in the MathJaxContext component, then conditionally only wrap content that needs MathJax (detected via a regex) in a MathJax component. It has been working well for a month. Today, we have observed the following console error on pages that contain MathJax:

only one instance of babel-polyfill is allowed

Our application loads and uses babel-polyfill for IE 11 support. But we can toss it out, however, when we remove the require for babel-polyfill from our main app.jsx, MathJax no longer renders.

We are going back to the drawing board, and are going to try eliminating the need for a conditional display of MathJax, and just let it render on all delimiters on a page, by re-enabling the default typesetting on page load for MathJax, via the config for the MathJaxContext component. However, I'm reporting this issue in the hopes there might be a workaround or other suggestion than changing the data in our repository.

[fast-reflexes]

Hi there!

I'm not aware of that this library has got anything to do with babel-polyfill. It doesn't even use Babel for transpilation so I'm not sure in what way it seems to interfere with babel-polyfill. Perhaps MathJax itself installs babel-polyfill somehow but then better-react-mathjax is not to blame.

Can you show me any code? I believe you have a somewhat complex situation there and I need to see some code to be able to help you. Otherwise, make sure you have the MathJaxContext in ONE place of the app where it doesn't unmount and remount all the time (e.g. it should wrap the root component). Then you should be able to have as many conditional MathJax components as you want. You could also try replacing better-react-mathjax with a pure MathJax environment and see if the problem persists, then we know for sure that this library is not the problem.. But as I said, if you give me something more to work with, I could run some tests myself to see what the problem is. Try to make a small example where it fails and post it :)

[hardyoyo]

Sure, here's a pull request that points to all the parts mentioned above: https://github.com/eScholarship/jschol/pull/588

I do think you're right that polyfill is coming from MathJax itself.

I believe you have a somewhat complex situation there

You're correct. I think we will be better off proceeding with a plan that relies on marking up math content using a delimiter other than the single dollar sign (which created our need for using a regex to choose when to render MathJax, since non-math content can also use multiple dollar signs, with hilarious results). Then we can simply use a MathJaxContext to paint a big target on our pages.

TLDR, I think we'll be fine. However, I did want to let you know that including babel-polyfill in one's React app seems to interact with this library in mysterious ways. I should probably also alert the MathJax folks.

[fast-reflexes]

Hmm.. I don't understand a lot from that PR and neither do I REALLY understand your context and what it is that you're trying to detect. It seems that:

• You have a MathJaxContext present all the time in your app
• Whenever you use a MathJax component you get an error about duplicate babel-polyfill but as long as this conditional `MathJax´ component is not included, you're fine.
• You WERE fine up until some point where something changed? What changed?
• The error only shows n IE11
• When you remove the babel-polyfill from your app, MathJax doesn't work either.. so basically, MathJax never works?

So if you manually add a MathJax component that is non-conditional, you always get this babel-polyfill error then I assume? What did you change when this behaviour started?

Since IE11 is a deprecated browser, it's very limited how much ppl would be willing to look into the problem (no matter if it's me or the guys with MathJax). Personally, I have stopped pursuing the strategy to support a lot of old browsers, given how simple it is to download a new browser these days (we all remember the web-dev days when we tried to support IE7 and IE8 and IE9 and we wrote loads of special cases for all of these :D). If a browser is deprecated, the user is using it at their own risk.

Given all of this, I'd love to look into the problem, I always have the attitude that all problems can be solved, but I can't dig into your huge project to understand it and pinpoint the problems, if so, I need you to create a minimal toy project from your project which contains exactly as little as possible for the error to show :) Thanks for filing though!

[fast-reflexes]

No update on this so far so will close since I cannot replicate it without help.