v5 breaks in react-native

[nfmshow]

First, thanks a lot for this great library. I've been finding it really difficult to implement markdown math rendering (without a webview) in react native. I stumbled upon this library but v5.0.0 crashes the app once markdownit.use( MarkdownItMath) is called.

v4.1.1 works though it didn't catch all the math expressions, Does that version support custom delimiters?

[runarberg]

v4 supports custom delimiters using the now deprecated inlineOpen, inlineClose, blockOpen, and blockClose. These are limited though as they only support a single pair of inline and block delimiters respectively. The defaults are also different than in v5 (v4 uses "$$" and "$$$" while v5 uses both "$" and ["$`", "`$"] for inline and "$$" for block by default), as well as a different default renderer (v4 defaults to ascii2MathML while v5 defaults to its successor mathup).

See full migration guide here (there were a lot of breaking changes): https://github.com/runarberg/markdown-it-math?tab=readme-ov-file#upgrading-from-v4

[runarberg]

I suspect this is happening because of a top level await I use to load an optional peer dependency: https://github.com/runarberg/markdown-it-math/blob/main/index.js#L12-L18

I’ve never used React native my self but as I understand it top-level await is not well supported for now: facebook/hermes#1481 (comment)

If this is the reason I think the solution here might be to apply code transformation (e.g. rollup) which targets environments which don‘t support top-level await. Is there a specific target which react native prefers, e.g. commonjs? over es-modules?

[nfmshow]

@runarberg Thank you. I'll just stick with v4. I used a fork which supports a "loose mode". That, together with a custom preprocessing function solved all the other problems I had.

[runarberg]

@nfmshow since v5.1 we also support something akin to loose-mode with the inlineAllowWhiteSpacePadding option. And I think the react native bug has been fixed in v5.2 which I just released. If I am correct something like this will solve your problem (assuming you are using Temml as your renderer):

npm install --save temml markdown-it markdown-it-math@latest

import markdownIt from "markdown-it";
import markdownItMath from "markdown-it-math/no-default-renderer";
import temml from "temml";

const md = markdownIt().use(markdownItMath, {
  inlineAllowWhiteSpacePadding: true,
  inlineRenderer: (str) => temml.renderToString(str),
  blockRenderer: (str) => temml.renderToString(str, { displayMode: true }),
});

The crucial part is in how you import markdown-it-math, importing instead from "markdown-it-math/no-default-renderer", which doesn’t try to import any default renderer with an async import.