search

fast-reflexes / better-react-mathjax

MIT License
127 stars 16 forks source link

MathJax not rendering in CRA optimized production build #42

Closed mark-wiemer closed 1 year ago

mark-wiemer commented 1 year ago
  1. Clone https://github.com/mark-wiemer/better-react-mathjax-bug
  2. npm start and change the input to 1+2: you'll see the MathJax render correctly
  3. npm run build && serve -s build, change the input

Expected: MathJax renders correctly

Actual: MathJax just renders as plaintext

Notes: Debugging via sources tab shows the same value is stored for the latex variable in App.tsx. Without special text, the React Components tab provided by React Developer Tools Chromium extension shows the same children to the component.

However, when rendering a fraction, the prod build shows a single backslash provided as a child \frac{1}{2} instead of \\frac{1}{2}, which is how the npm start build works.

npm start build:

image

Optimized production build:

One backslash: image

Two backslashes: image

fast-reflexes commented 1 year ago

Hi there!

Thanks for the question, before I even start digging into this, did you add the dynamic property to the MathJax component as you should when the content will change after initial rendering? :)

mark-wiemer commented 1 year ago

Resolved, thanks. I just needed to add dynamic 🤦🏻

mercicle commented 1 year ago

Thanks for submitting this issue! dynamic={true} This fixed my Heroku production bug as well. Whew!