Vite + mathpix-markdown-it

[rom-ger]

Hello.
I created vite project npm create vite@latest (react + typescript) (node 18.15.0)
then i installed "mathpix-markdown-it": "1.2.13"
then i used it in my project

import { MathpixMarkdownModel as MM, TMarkdownItOptions } from 'mathpix-markdown-it';

const mathpixOptions: TMarkdownItOptions = {};

function App() {
  const generatedHtml = {
    __html:
      MM.markdownToHTML(
        '',
        mathpixOptions,
    )
};

  return (
    <>
    </>
  )
}

and finally i saw error in console
TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

how can i fix it?

[rom-ger]

@OlgaRedozubova I`m waiting feedback

[OlgaRedozubova]

This occurs in the package we use to render the math.
Related issue mathjax/MathJax#2748

This is due to the fact that

Vite cannot handle and does not support code that only runs on non-strict mode (sloppy mode). This is because Vite uses ESM and it is always strict mode inside ESM.

https://github.com/vitejs/vite/blob/fffe16ee9a9773910ef6cc8e9f0b75b3b9db7b58/docs/guide/troubleshooting.md#syntax-error--type-error-happens

You need to disable this for node-modules

[rom-ger]

@OlgaRedozubova maybe you should add a patch for module "mathjax-full" inside your module?

[rom-ger]

@OlgaRedozubova ?

[rom-ger]

@OlgaRedozubova maybe you should add a patch for module "mathjax-full" inside your module?

it's very important for us

[raviadi12]

Hi, i've got a same problem too, and fixed it using

  optimizeDeps: {
    // Disable warnings for specific dependencies
    exclude: ['mathpix-markdown-it'],
  },

But now i got an error: "Uncaught SyntaxError: ambiguous indirect export: MathpixMarkdown". I need help please.

[OlgaRedozubova]

I think the best solution here would be to disable strict mode.
To avoid patching mathjax-full

@OlgaRedozubova maybe you should add a patch for module "mathjax-full" inside your module?

MathJax has no plans to make these changes yet mathjax/MathJax#3122 (comment)

I added such a patch in this branch dev/olga/278-Vite-mathpix-markdown-it #291

This works inside mathpix-markdown-it, but it won't work when installing the mathpix-markdown-it dependency

In order for the patch for mathjax-full to work, you need to create such a patch in your project.

@rom-ger @raviadi12

Creating a patch for mathjax-full

https://github.com/ds300/patch-package

1. In node_modules to notice the files (I attached Zip archives of these files):
   node_modules/mathjax-full/js/input/asciimath/mathjax2/input/AsciiMath.js - AsciiMath.js.zip
   node_modules/mathjax-full/js/input/asciimath/mathjax2/legacy/MathJax.js - MathJax.js.zip

2. Install patch-package and postinstall-postinstall:
   yarn add patch-package postinstall-postinstall
   or
   npm install patch-package postinstall-postinstall

3. Add postinstall script:

 "scripts": {
  "postinstall": "patch-package"
 }

4. Run patch-package to create a .patch file
   npx patch-package mathjax-full
   or
   yarn patch-package mathjax-full

This will produce following changes patches/mathjax-full+3.0.1.patch:

5. Apply your fix via npm package manager:
   npm install
   or
   yarn install

I tested this in a test application on Angular17 which use Vite. It works to me

@rom-ger @raviadi12 I hope this solution helps you.

[rom-ger]

@OlgaRedozubova it is really work! thanks!

[jiang1654]

我认为最好的解决方案是禁用严格模式。 为了避免打补丁mathjax-full

@OlgaRedozubova也许您应该在模块内添加模块“mathjax-full”的补丁？

MathJax 尚无计划进行这些更改mathjax/MathJax#3122（评论）

我在这个分支中添加了这样的补丁dev/olga/278-Vite-mathpix-markdown-it #291

这在内部有效，但在安装依赖项 mathpix-markdown-it时不起作用mathpix-markdown-it

为了使补丁mathjax-full发挥作用，您需要在项目中创建这样的补丁。

@rom-ger @raviadi12

创建补丁mathjax-full

https://github.com/ds300/patch-package

1. 注意node_modules这些文件（我附上了这些文件的 Zip 存档）：
   node_modules/mathjax-full/js/input/asciimath/mathjax2/input/AsciiMath.js- AsciiMath.js.zip
   node_modules/mathjax-full/js/input/asciimath/mathjax2/legacy/MathJax.js - MathJax.js.zip
2. 安装patch-package并postinstall-postinstall：
   yarn add patch-package postinstall-postinstall
   或
   npm install patch-package postinstall-postinstall
3. 添加安装后脚本：

 "scripts": {
  "postinstall": "patch-package"
 }

4. 运行 patch-package 以创建 .patch 文件
   npx patch-package mathjax-full
   或
   yarn patch-package mathjax-full

这将产生以下变化patches/mathjax-full+3.0.1.patch：

5. 通过 npm 包管理器应用修复： `npm install` 或 `yarn install` 我在 Angular17 上使用 Vite 的测试应用程序中对此进行了测试。这对我有用

@rom-ger @raviadi12我希望这个解决方案对您有所帮助。

npx patch-package mathjax-full
patch-package 8.0.0
patch-package: you have both yarn.lock and package-lock.json
Defaulting to using npm
You can override this setting by passing --use-yarn or deleting
package-lock.json if you don't need it

• Creating temporary folder
• Installing mathjax-full@3.0.1 with npm
• Diffing your files with clean files
⁉️ Not creating patch file for package 'mathjax-full'
⁉️ There don't appear to be any changes.

I need help when encountering this issue during patch installation.

[elitebyte]

Same issue as above. I'm using Vite + React 18 MathJax 1.3.1

[tomas-sipko]

@OlgaRedozubova The patch helped with local development using, however, when I build it with vite build and deploy it, I get an error Uncaught ReferenceError: MathJax is not defined.
You can reproduce it by running vite build and vite preview afterwards.

Any ideas what causes the problem?

[bumberboy]

I'm also experiencing this. Did you figure out how to solve this? @tomas-sipko

@OlgaRedozubova The patch helped with local development using, however, when I build it with vite build and deploy it, I get an error Uncaught ReferenceError: MathJax is not defined. You can reproduce it by running vite build and vite preview afterwards.

Any ideas what causes the problem?

[xvweimin]

@OlgaRedozubova The patch helped with local development using, however, when I build it with vite build and deploy it, I get an error Uncaught ReferenceError: MathJax is not defined. You can reproduce it by running vite build and vite preview afterwards.

Any ideas what causes the problem?

...
// Add the following four lines of code
if (typeof global.MathJax === 'undefined') {
  global.MathJax = {};
}
MathJax = Object.assign(global.MathJax || {}, require("../xxx/MathJax.js").MathJax); // Modify the file reference path here

MathJax.xxx // The code where the error occurred
...

I also encountered this problem. I referred to the patch solution above and modified the code where the error was reported. It worked successfully.

[enricobolzonello]

@OlgaRedozubova The patch helped with local development using, however, when I build it with vite build and deploy it, I get an error Uncaught ReferenceError: MathJax is not defined. You can reproduce it by running vite build and vite preview afterwards.
Any ideas what causes the problem?

...
// Add the following four lines of code
if (typeof global.MathJax === 'undefined') {
  global.MathJax = {};
}
MathJax = Object.assign(global.MathJax || {}, require("../xxx/MathJax.js").MathJax); // Modify the file reference path here

MathJax.xxx // The code where the error occurred
...

I also encountered this problem. I referred to the patch solution above and modified the code where the error was reported. It worked successfully.

@xvweimin I just got the same problem, but I did not understand your solution. Could you please expand the explanation?

[xvweimin]

@enricobolzonello Have you followed the patch solution at #278 (comment) ?
You can pay attention to the changes in the patch when replacing the file content, and you should be able to understand my solution.