better-react-mathjax icon indicating copy to clipboard operation
better-react-mathjax copied to clipboard

MathJax with React + InertiaJS + SSR

Open deniznet opened this issue 1 year ago • 3 comments

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!

deniznet avatar Aug 31 '24 11:08 deniznet