Code is rendered for a second and than disappeared.

[twierdzeniebanacha]

I'm trying to get MathJax to work in the framer service. Unfortunately, after refreshing, the equation renders correctly for a second and then disappears and the code itself appears.

1. Create account on framer.com
2. Insert MathJax Into custom HTML (HEADER)
3. Create equation.

Technical details:

• MathJax Version: 3.2 (newest possible)
• Client OS: (e.g., Windows 11/Android 14)
• Browser: (e.g., Chrome, Opera, Mozilla)

I am using the following MathJax configuration and loading MathJax via:

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Here is a link to the test website:
https://www.youwillsolveit.com/collection/test

[dpvc]

It looks like framer is replacing the page with the original page content after MathJax runs, wiping out the typeset mathematics after it was put in place.

The page generates the "Minified React error #418" message, and looking up this error, we see:

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

• A server/client branch if (typeof window !== 'undefined').
• Variable input such as Date.now() or Math.random() which changes each time it's called.
• Date formatting in a user's locale which doesn't match the server.
• External changing data without sending a snapshot of it along with the HTML.
• Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

Since MathJax changes the DOM, it is likely that that is the issue that React is complaining about (though I don't know much about React myself).

You probably need to configure MathJax to not do its initial typesetting, and wait to do that until framer has loaded the dynamic context of the page. There may be a signal that you can hook into from Framer that will tell you when it is done loading the page, and then you can call MathJax.typesetPromise() to do the typesetting. There is a community post that gives some code for running a script when the page changes, but I don't know if it will work for you or not.

Otherwise, you may need to contact the Framer support community to find out if anyone has worked out how to use MathJax in that setting. It looks like there might not be the needed support, according to this post.