MathJax with React + InertiaJS + SSR

[deniznet]

Hello! I'm tring run ssr in exist project laravel+inertia+react(typescript)+MathJax+MathLive. Run SSR by https://inertiajs.com/server-side-rendering. Run "npm run build" without error, but when I started "php artisan inertia:start-ssr", I get error:

file:///F:/Projects/php/laravel/myproj/bootstrap/ssr/ssr.js:12
import { MathJaxContext, MathJax } from "better-react-mathjax";
                         ^^^^^^^
SyntaxError: Named export 'MathJax' not found. The requested module 'better-react-mathjax' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'better-react-mathjax';
const { MathJaxContext, MathJax } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:122:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:188:5)
    at async DefaultModuleLoader.import (node:internal/modules/esm/loader:228:24)
    at async loadESM (node:internal/process/esm_loader:40:7)
    at async handleMainPromise (node:internal/modules/run_main:66:12)

Node.js v20.5.1

On page with MathJax

import {MathJaxContext} from "better-react-mathjax";
import {MathJax} from "better-react-mathjax";

const configJAX = {
        loader: { load: ["[tex]/html"] },
        tex: {
            packages: { "[+]": ["html"] },
            inlineMath: [
                ["$", "$"],
                ["\\(", "\\)"]
            ],
            displayMath: [
                ["$$", "$$"],
                ["\\[", "\\]"]
            ]
        }
    };

<MathJaxContext version={3} config={configJAX}>
            <MathJax>
                 {'$$'+codeTex+'$$'}
            </MathJax>
</MathJaxContext>

When I added code to page as show:

import pkg from 'better-react-mathjax';
const { MathJaxContext, MathJax } = pkg;

I get error on "npm run build":

"default" is not exported by "node_modules/better-react-mathjax/esm/index.js", imported by "resources/js/Layouts/AuthenticatedLayout.tsx".
file: F:/Projects/php/laravel/myproj/resources/js/Layouts/AuthenticatedLayout.tsx:15:7
13: import {IMenu} from "@/types/menu";
14: import {AppToastManager} from "@/Components/Controls/Toast/ToastManager";
15: import pkg from 'better-react-mathjax';
           ^
16: const { MathJaxContext} = pkg;
error during build:
RollupError: "default" is not exported by "node_modules/better-react-mathjax/esm/index.js", imported by "resources/js/Layouts/AuthenticatedLayout.tsx".
    at error (file:///F:/Projects/php/laravel/myproj/node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
    at Module.error (file:///F:/Projects/php/laravel/myproj/node_modules/rollup/dist/es/shared/node-entry.js:13745:16)
    at Module.traceVariable (file:///F:/Projects/php/laravel/myproj/node_modules/rollup/dist/es/shared/node-entry.js:14175:29)
    at ModuleScope.findVariable (file:///F:/Projects/php/laravel/myproj/node_modules/rollup/dist/es/shared/node-entry.js:12615:39)
    at Identifier.bind (file:///F:/Projects/php/laravel/myproj/node_modules/rollup/dist/es/shared/node-entry.js:8319:40)
    at VariableDeclarator.bind (file:///F:/Projects/php/laravel/myproj/node_modules/rollup/dist/es/shared/node-entry.js:5892:23)
    at VariableDeclaration.bind (file:///F:/Projects/php/laravel/myproj/node_modules/rollup/dist/es/shared/node-entry.js:5888:28)
    at Program.bind (file:///F:/Projects/php/laravel/myproj/node_modules/rollup/dist/es/shared/node-entry.js:5888:28)
    at Module.bindReferences (file:///F:/Projects/php/laravel/myproj/node_modules/rollup/dist/es/shared/node-entry.js:13741:18)
    at Graph.sortModules (file:///F:/Projects/php/laravel/myproj/node_modules/rollup/dist/es/shared/node-entry.js:25853:20)

Without SSR all work fine. What I should do? How to run MathJax with SSR? Thank you!

[fast-reflexes]

Hi there!

This issue has been discussed before, for example here: https://github.com/fast-reflexes/better-react-mathjax/issues/33

I would like to get SSR working with Mathjax and better-react-mathjax but currently, I don't know if it's possible and in what direction such work would take place. I have a playground locally where I'm trying to get this going but I have had very limited success. I think the gist is that Mathjax originally was built as a client-side library typesetting the DOM in the browser and in the backend there is no DOM in the traditional sense. Perhaps it would be nice to render the backend in a virtual backend DOM and typeset with Mathjax and THEN "serialize" it to HTML code and send it to the frontend but I don't know how to do that currently.

The short answer is, SSR is not currently possible and the long answer is "I hope SSR will be possible in the future" :)

I'm ready to put a reasonable amount of work into this so if anyone has a clear idea on how to do this, I'm all ears :)

[fast-reflexes]

Just a follow-up, the error you're SEEING might be connected to something else (both esm and cjs modules are exported from this library and maybe the wrong gets imported during SSR somehow but even if that worked, something else would fail because the MathJax script installs itself onto the window object which doesn't even exist during SSR so I guarantee it wouldn't work.

We could do typesetting manually with Mathjax from the Mathjax package but this process is not at all as simple (we usually just pass DOM nodes to Mathjax and they typeset but as I recall it, it could not be done that easily when you do it manually). Might give this some more time in the near future because I'm eager to solve it.

[deniznet]

Thank you for answer!