Has anyone had success with MDX/KaTeX rendering in an Electron app?

[teauxfu]

Related to MDX but ultimately out of scope -- issue here is Electron/ES modules, not MDX itself
Hopefully someone here may have some advice on what solution/alternative I could explore next.
Maybe this is just an XY problem...?

My desired goal is to easily render technical documents from MDX in an Electron app.
While MDX works fine in Electron -- the remark/rehype plugins are introducing a hurdle.
I'm trying to use MDX/KaTeX from within an electron-forge app, which is why I'm having trouble.
The short version of my question is: do you think it would be worthwhile to try going through old, pre-ESM-only versions of remark/etc hoping one would work in Electron?

I see that there's some documentation for using math blocks already -- thanks!

• v1.6.22 docs -- https://github.com/mdx-js/mdx/blob/v1.6.22/docs/guides/math-blocks.mdx
• main docs -- https://github.com/mdx-js/mdx/blob/main/docs/guides/math-blocks.server.mdx

I'm struggling with these lines here

//webpack.rules.js
const remarkMath = require("remark-math");
const rehypeKatex = require("rehype-katex");

Which is problematic since the latest remark/rehype are ESM only

• rehype install -- https://github.com/rehypejs/rehype/tree/main/packages/rehype#install
• remark install -- https://github.com/remarkjs/remark/tree/main/packages/remark#install

Node 12+ is needed to use it and it must be imported instead of required

and so Node complains about not using import

An unhandled error has occurred inside Forge:
Must use import to load ES Module: C:\Users\CAJN\repos\forge-prototype\node_modules\remark-math\index.js
require() of ES modules is not supported.
require() of C:\Users\CAJN\repos\forge-prototype\node_modules\remark-math\index.js from C:\Users\CAJN\repos\forge-prototype\webpack.rules.js is an ES module file as it is a .js file whose nearest parent package.json
contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\CAJN\repos\forge-prototype\node_modules\remark-math\package.json.

so I tried that instead by following the example from the remark-math readme
https://github.com/remarkjs/remark-math/tree/main#use

//webpack.rules.js
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";

which also complains

An unhandled error has occurred inside Forge:
Cannot use import statement outside a module
C:\Users\CAJN\repos\forge-prototype\webpack.rules.js:4
import remarkMath from "remark-math";

SyntaxError: Cannot use import statement outside a module
...

I'm still pretty new to this, and still wrapping my head around what using ES modules really means, so it's not clear to me what exactly the problem is. I feel like the mostly likely culprits are Electron itself, or maybe my webpack config... 🤮

Related discussion in Electron's repo -- electron/electron#21457 (comment)

[ChristianMurphy]

I haven't personally tried that particular combo of packages yet, though there is some documentation on how it can be done https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c#how-can-i-import-esm-in-electron

The two options which seem most relevant:

1. configuring WebPack to generate CJS, since you seem to already be using WebPack
2. Use https://github.com/standard-things/esm to support ESM in electron

[teauxfu]

Thanks, I had been mostly using that post as a reference so far, to no avail...

I did try following through it's steps, but came here when that didn't work out.
Perhaps I overlooked something... I'll follow up if I can find anything useful.

If anyone has any other suggestions in the meantime I will gladly accept them 😅

[teauxfu]

So after much weeping and moaning and gnashing of teeth the answer seems to be that it simply isn't possible to shoehorn the needed ESM plugins into Electron Forge to get MDXjs to render math blocks. Even exposing the plugins to webpack config via esm's require did not work. There's also seemingly not much incentive for Electron Forge to support ESM, so there may indefinitely not be a neat solution to this issue.

Perhaps a custom build pipeline without using Electron Forge could work, but that's probably more trouble than it is worth.

I was able to find a electron-mathjax plugin, but it seems kind of abandoned and poorly documented and I've been unable to get it to work so far. At this point it seems like it would be easier (for my purposes) to just pre-render the needed math and load it as a static image asset.

I would be relieved if someone could prove me wrong here.
I'll go ahead and mark the above reply as an answer. Thanks again.

[ChristianMurphy]

Another approach worth noting, if electron forge's config doesn't readily support compiling to CJS, is to bundle the ESM code using another tool and load that into the electron app

Something like:

esm-source.mjs

import { micromark } from "micromark";
import rehypeParse from "rehype-parse";
import { visit } from "unist-util-visit";
import { unified } from "unified";
// any unified util or ESM package can be imported here

// and exported here
export {
  micromark,
  rehypeParse,
  visit,
  unified,
};

which lists out any ESM dependencies and re-exports them.
with a node script using esbuild like

esbuild esm-source.mjs --outfile=cjs-bundle.js --format=cjs --platform=node --bundle

would allow cjs-bundle.js to include all of the ESM code in a way that electron forge never sees or tries to build any ESM code.
from the app's perspective const { unified } = require("./cjs-bundle.js") is all it needs to worry about.