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 [email protected] 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.

[jdk2pq]

I know this is a bit old, but here's how I fixed the above Uncaught ReferenceError: MathJax is not defined error in both development and with vite build:

First, make sure to define MathJax and global on the window object by putting it somewhere in a file that gets loaded first in your app. I'm using Vue, so I placed the following in my main.ts file before any JS imports:

if (!window.MathJax) {
	window.MathJax = {};
}

window.global = window;

global is used throughout the MathJax library, so we have to define that on the window object as well.

Then, in the .patch file linked above, add the following on Line 16:

@@ -1,7 +1,1 @@ exports.MathJax = MathJax;
-var MathJax = {debug:true};
+MathJax = {debug:true};
-
-var window = {
-  MathJax: MathJax
-};
-var navigator = {};
-var document = null;

Also, MathJax is now on version 3.2.2, but this patch is specifically for version 3.0.1, so make sure you install the correct version with your package manager.

[AFFFPupu]

I know this is a bit old, but here's how I fixed the above Uncaught ReferenceError: MathJax is not defined error in both development and with vite build:

First, make sure to define MathJax and global on the window object by putting it somewhere in a file that gets loaded first in your app. I'm using Vue, so I placed the following in my main.ts file before any JS imports:

if (!window.MathJax) {
	window.MathJax = {};
}

window.global = window;

global is used throughout the MathJax library, so we have to define that on the window object as well.

Then, in the .patch file linked above, add the following on Line 16:

@@ -1,7 +1,1 @@ exports.MathJax = MathJax;
-var MathJax = {debug:true};
+MathJax = {debug:true};
-
-var window = {
-  MathJax: MathJax
-};
-var navigator = {};
-var document = null;

Also, MathJax is now on version 3.2.2, but this patch is specifically for version 3.0.1, so make sure you install the correct version with your package manager.

I know this is a bit old, but here's how I fixed the above Uncaught ReferenceError: MathJax is not defined error in both development and with vite build:

First, make sure to define MathJax and global on the window object by putting it somewhere in a file that gets loaded first in your app. I'm using Vue, so I placed the following in my main.ts file before any JS imports:

if (!window.MathJax) {
	window.MathJax = {};
}

window.global = window;

global is used throughout the MathJax library, so we have to define that on the window object as well.

Then, in the .patch file linked above, add the following on Line 16:

@@ -1,7 +1,1 @@ exports.MathJax = MathJax;
-var MathJax = {debug:true};
+MathJax = {debug:true};
-
-var window = {
-  MathJax: MathJax
-};
-var navigator = {};
-var document = null;

Also, MathJax is now on version 3.2.2, but this patch is specifically for version 3.0.1, so make sure you install the correct version with your package manager.

Thanks for sharing. By the way, which mathpix markdown version are you using?
I used "mathjax": "^3.0.1",
"mathjax-full": "^3.0.1",
"mathpix-markdown-it": "^1.3.10",
but after npm build, i have
Unexpected Application Error!
Cannot read properties of undefined (reading 'directory') which points to the code
directory: MathJax.ElementJax.directory + "/mml",
do you have any idea why? Thanks

[jdk2pq]

@AFFFPupu I'm using [email protected] and [email protected]. I have both dependencies pinned to those specific versions in my package.json, and I'd recommend removing the ^ character from the versions you posted above to ensure you get those specific versions.

For that error, it sounds like the MathJax.ElementJax object isn't getting defined properly, so when it attempts to read the .directory property, it hits the undefined error. If you look at the code here https://www.npmjs.com/package/mathjax-full/v/3.0.1?activeTab=code, go to the file /mathjax-full/js/input/asciimath/mathjax2/legacy/MathJax.js and on line 1846, you'll see BASE.ElementJax get defined. The BASE variable should point to the MathJax object on window.

Then, in the file/mathjax-full/js/input/asciimath/mathjax2/legacy/jax/element/mml/jax.js, on line 34, it looks like that's where the error is being hit.

The additions to the .patch file in my comment above and assigning window.MathJax = {} should help fix that. You can also define window.MathJax = { ElementJax: {} }, but I think you'll likely hit an error further down the chain even with that, so it's probably better to apply the patch.

Hope this helps!

[AFFFPupu]

@jdk2pq Thanks for your reply! It seemed that the two files are not correctly modified by me and after i added you lines, it now worked fine. Cheers!

[timelic]

For anyone who encounters the error Uncaught ReferenceError: MathJax is not defined, you can resolve it by using @jdk2pq's latest patch and placing the code to define the global MathJax variable in your index.html like this:

<!doctype html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <div id="root"></div>
    <script>
      if (!window.MathJax) {
        window.MathJax = {};
      }
      window.global = window;
    </script>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>