Packaging node-main.js to CommonJS breaks compatibility with bun

[djdjz7]

Issue Summary

MathJax cannot be run with Bun.js, probably caused by webpacking the node-main.js file to CommonJS.

Steps to Reproduce:

Just running the example script given by the official tutorial will fail. Or, apparently, just do import MathJax from "mathjax" and access the MathJax object will fail.

Bun throws the following error:

1 | (()=>{var __webpack_modules__={6:(t,e,s)=>{"use strict";s.r(e),s.d(e,{APPEND:()=>n,Expandable:()=>l,OPTIONS:()=>o,REMOVE:()=>a,copy:()=>u,defaultOptions:()=>m,expandable:()=>c,insert:()=>p,isObject:()=>r,keys:()=>d,lookup:()=>L,makeArray:()=>h,selectOptions:()=>f,selectOptionsFromKeys:()=>g,separateOptions:()=>R,userOptions:()=>E});const i={}.constructor;function r(t){return"object"==typeof t&&null!==t&&(t.constructor===i||t.constructor===l)}const n="[+]",a="[-]",o={invalidOption:"warn",optionError:(t,e)=>{if("fatal"===o.invalidOption)throw new Error(t);console.warn("MathJax: "+t)}};class l{}function c(t){return Object.assign(Object.create(l.prototype),t)}function h(t){return Array.isArray(t)?t:[t]}function d(t){return t?Object.keys(t).concat(Object.getOwnPropertySymbols(t)):[]}function u(t){const e={};for(const s of d(t)){const i=Object.getOwnPropertyDescriptor(t,s),n=i.value;Array.isArray(n)?i.value=p([],n,!1):r(n)&&(i.value=u(n)),i.enumerable&&(e[s]=i)}return Object.defineProperties(t.constructor===l?c({}) | ... truncated

TypeError: The "path" property must be of type string, got undefined
 code: "ERR_INVALID_ARG_TYPE"

My investigation shows that this may be related to the node-main.js, which is written in ESM, but packaged to CommonJS with webpack, as the case in the MathJax-src repo.

When importing MathJax, the node-main.mjs is the entry point:

import './node-main-setup.mjs';
import {MathJax} from './node-main.js';
export default MathJax;
export const init = MathJax.init;

And the mix of CommonJS node-main.js and node-main-setup.mjs import seems to make bun resolve ./node-main.js first, before global.MathJax is set in node-main-setup.mjs, probably due to the asynchronous nature of ESM imports.

Fixing the issue on client side is kinda easy, just modify the second line to

const MathJax = (await import('./node-main.js')).MathJax;

but whether this breaks other stuff remains to be seen...

actually i have no idea why we should await the second line instead of the first, but it just works.

Technical details:

• MathJax Version: 4.0
• Bun.js Version: 1.3.3

[dpvc]

OK, I can reproduce the issue you are seeing. It does seem that bun doesn't respect the order of the imports, which I think is not correct. My understanding is that, as of ES2020, the order of imports is supposed to be respected.

In any case, there are several possible work-arounds:

1. You could change

   import MathJax from "@mathjax/src";

   to

   import MathJax from "@mathjax/src/source";

   so that your code will load from source rather than the web-packed files. That avoids the problem.

2. You could add the file node-main-startup.js to the node_modules/@mathjax/src/bundle directory with the lines

   global.require = eval('require');
   const path = require("path");
   if (!global.MathJax) global.MathJax = {};
   global.MathJax.__dirname = __dirname;

   and change the first line of node_modules/@mathjax/src/bundle/node-main.mjs to

   import './node-main-setup.js';

   (that is, change .mjs to .js).

Either of these should do the trick. I will make a PR to implement 2 in the next release.