Vercel - Error: Could not load script: "file:///var/task/node_modules/mathjax/unpacked/jax/element/mml/jax.js?V=2.7.9"

[snake-py]

I am trying to deploy this to vercel but I am getting an error that the file could not be located. I am at a loss here, perhaps someone here has an idea for me? Locally it is working fine.

package.json

    "mathjax-node": "^2.1.1",

API:

import type { NextApiRequest, NextApiResponse } from 'next';
const mjAPI = require('mathjax-node');

type resData = {
  svg: {
    input: string;
    svg: string;
  };
};

type reqData = {
  input: string;
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<resData>
) {
  const { input } = req.query as reqData;
  const mathString = input as string;
  const svg = await mjAPI.typeset({
    math: mathString,
    format: 'TeX',
    svg: true,
    color: '#000',
  });
  res.status(200).json({ svg });
}

Error:

e_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
    at HTMLScriptElementImpl.dispatchEvent (/var/task/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
    at /var/task/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:42:17
    at Object.check (/var/task/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:76:11)
    at ReadStream.<anonymous> (/var/task/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:95:12)
    at ReadStream.wrappedEnqueued (/var/task/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:253:16)
    at ReadStream.emit (node:events:527:28) TypeError: Cannot read properties of undefined (reading 'resetGlyphs')
    at /var/task/node_modules/mathjax-node/lib/main.js:521:35
    at Function.execute (file:///var/task/node_modules/mathjax/unpacked/MathJax.js:243:26)
    at cb (file:///var/task/node_modules/mathjax/unpacked/MathJax.js:225:59)
    at Object.Execute (file:///var/task/node_modules/mathjax/unpacked/MathJax.js:426:36)
    at Object.ExecuteHooks (file:///var/task/node_modules/mathjax/unpacked/MathJax.js:604:31)
    at Function.execute (file:///var/task/node_modules/mathjax/unpacked/MathJax.js:243:26)
    at cb (file:///var/task/node_modules/mathjax/unpacked/MathJax.js:225:59)
    at Object.Execute (file:///var/task/node_modules/mathjax/unpacked/MathJax.js:426:36)
    at Object.Post (file:///var/task/node_modules/mathjax/unpacked/MathJax.js:537:37)
    at Function.execute (file:///var/task/node_modules/mathjax/unpacked/MathJax.js:243:26)
2022-07-09T20:00:40.850Z    abf3e37a-e3a7-42b7-a130-2b62375b0b9e    ERROR   Error: Could not load script: "file:///var/task/node_modules/mathjax/unpacked/extensions/toMathML.js?V=2.7.9"
    at /var/task/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:44:23
    at Object.check (/var/task/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:76:11)
    at ReadStream.<anonymous> (/var/task/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:95:12)
    at ReadStream.wrappedEnqueued (/var/task/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:253:16)
    at ReadStream.emit (node:events:527:28)
    at emitErrorNT (node:internal/streams/destroy:157:8)
    at emitErrorCloseNT (node:internal/streams/destroy:122:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) [Error: ENOENT: no such file or directory, open '/var/task/node_modules/mathjax/unpacked/extensions/toMathML.js'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/var/task/node_modules/mathjax/unpacked/extensions/toMathML.js'
}
2022-07-09T20:00:40.853Z    abf3e37a-e3a7-42b7-a130-2b62375b0b9e    ERROR   File load error: file:///var/task/node_modules/mathjax/unpacked/jax/element/mml/jax.js
2022-07-09T20:00:40.854Z    abf3e37a-e3a7-42b7-a130-2b62375b0b9e    ERROR   Error: Could not load script: "file:///var/task/node_modules/mathjax/unpacked/jax/element/mml/jax.js?V=2.7.9"
    at /var/task/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:44:23
    at Object.check (/var/task/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:76:11)
    at ReadStream.<anonymous> (/var/task/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:95:12)
    at ReadStream.wrappedEnqueued (/var/task/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:253:16)
    at ReadStream.emit (node:events:527:28)
    at emitErrorNT (node:internal/streams/destroy:157:8)
    at emitErrorCloseNT (node:internal/streams/destroy:122:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) [Error: ENOENT: no such file or directory, open '/var/task/node_modules/mathjax/unpacked/jax/element/mml/jax.js'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/var/task/node_modules/mathjax/unpacked/jax/element/mml/jax.js'
}
2022-07-09T20:00:48.554Z abf3e37a-e3a7-42b7-a130-2b62375b0b9e Task timed out after 10.02 seconds

[pkra]

Bystander here. You're likely better off following one of the examples for MathJax v3 https://github.com/mathjax/MathJax-demos-node/.

[dpvc]

As Peter mentions, you probably want to switch to MathJax v3 for this. MathJax-node was a hack to get MathJax v2 to work in node applications, and is pretty clumsy in many respects. Version 3 was redesigned in order to allow it to work in node applications more naturally, and to give more control within the browser as well.

I am not familiar with vercel, but it appears that this is for creating web pages; mathJax-node should not be used in a browser, so unless this is running on the server to generate the pages, this is the wrong application of mathjax-node. With MathJax v3, you should be able to work in the browser or on the server with essentially the same code.

[snake-py]

@dpvc I took a different approach and use Mathjax now in the front.

FYI - vercel is a serverless function hosting. It is often used for serving frontends, but it also runs node for backend functions.

Thank you for your help

[snake-py]

@pkra I had a look at the repo. What is in the way that this is published to NPM? I maybe would give it another try to incorporate it into my project.

[dpvc]

The demos repository is not in an npm module, but you could use a GitHub reference to load it directly from the repository.