better-react-mathjax
better-react-mathjax copied to clipboard
MathJax with React + InertiaJS + SSR
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!