MathJax error -- TypeError: Cannot read properties of null (reading '4') #88

rrcobb · 2023-10-04T15:59:46Z

Initial checklist

I read the support docs
I read the contributing guide
I agree to follow the code of conduct
I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

remark-mathjax@5.0.0, remark-math@6.0.0

Link to runnable example

No response

Steps to reproduce

index.js

import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import remarkMath from 'remark-math';
import rehypeMathjax from 'rehype-mathjax';
import rehypeStringify from "rehype-stringify";
import { unified } from "unified";

const source = `
Lift($$L$$) can be determined by Lift Coefficient ($$C_L$$) like the following
equation.

$$
L = \frac{1}{2} \rho v^2 S C_L
$$
`;
const htmlResult = await unified()
  .use(remarkParse)
  .use(remarkMath)
  .use(remarkRehype, { allowDangerousHtml: true })
  .use(rehypeMathjax)
  .use(rehypeStringify, { allowDangerousHtml: true })
  .process(source);

console.log(htmlResult);

package.json

{
  "name": "repro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "rehype-mathjax": "^5.0.0",
    "rehype-stringify": "^10.0.0",
    "remark-math": "^6.0.0",
    "remark-parse": "^11.0.0",
    "remark-rehype": "^11.0.0",
    "unified": "^11.0.3"
  }
}

Expected behavior

This should process and render without errors. Instead, it hits an error within mathjax.

Actual behavior

range[4] && mo.attributes.set('mathvariant', range[4]);
         ^

TypeError: Cannot read properties of null (reading '4')
    at Object.Other [as item] (/Users/rob/dev/kibo/product/repro/node_modules/.pnpm/mathjax-full@3.2.2/node_modules/mathjax-full/js/input/tex/base/BaseConfiguration.js:79:10)
    at SubHandler.parse (/Users/rob/dev/kibo/product/repro/node_modules/.pnpm/mathjax-full@3.2.2/node_modules/mathjax-full/js/input/tex/MapHandler.js:92:39)
    at TexParser.parse (/Users/rob/dev/kibo/product/repro/node_modules/.pnpm/mathjax-full@3.2.2/node_modules/mathjax-full/js/input/tex/TexParser.js:111:54)
    at TexParser.Parse (/Users/rob/dev/kibo/product/repro/node_modules/.pnpm/mathjax-full@3.2.2/node_modules/mathjax-full/js/input/tex/TexParser.js:143:18)
    at new TexParser (/Users/rob/dev/kibo/product/repro/node_modules/.pnpm/mathjax-full@3.2.2/node_modules/mathjax-full/js/input/tex/TexParser.js:76:14)
    at TeX.compile (/Users/rob/dev/kibo/product/repro/node_modules/.pnpm/mathjax-full@3.2.2/node_modules/mathjax-full/js/input/tex.js:118:26)
    at AbstractMathItem.compile (/Users/rob/dev/kibo/product/repro/node_modules/.pnpm/mathjax-full@3.2.2/node_modules/mathjax-full/js/core/MathItem.js:56:39)
    at Object.renderMath (/Users/rob/dev/kibo/product/repro/node_modules/.pnpm/mathjax-full@3.2.2/node_modules/mathjax-full/js/core/MathDocument.js:119:65)
    at RenderList.renderConvert (/Users/rob/dev/kibo/product/repro/node_modules/.pnpm/mathjax-full@3.2.2/node_modules/mathjax-full/js/core/MathDocument.js:171:35)
    at AbstractMathItem.convert (/Users/rob/dev/kibo/product/repro/node_modules/.pnpm/mathjax-full@3.2.2/node_modules/mathjax-full/js/core/MathItem.js:52:32)

Node.js v18.12.1

Runtime

Node v16

Package manager

pnpm

OS

macOS

Build and bundle tools

No response

The text was updated successfully, but these errors were encountered:

ChristianMurphy · 2023-10-04T16:40:08Z

Welcome @rrcobb! 👋
Sorry you ran into a spot of trouble.
These dependencies are compatible, here is a sandbox showing them working together https://stackblitz.com/edit/github-eju95a?file=src%2Fmain.ts,package.json with vite, and working on as a plain node script https://stackblitz.com/edit/stackblitz-starters-xug1ib?file=index.js
Most likely you are running into an issue with either a build tool (most likely) or with pnpm (also possible).

rrcobb · 2023-10-04T17:12:36Z

Welcome @rrcobb! 👋 Sorry you ran into a spot of trouble. These dependencies are compatible, here is a sandbox showing them working together https://stackblitz.com/edit/github-eju95a?file=src%2Fmain.ts,package.json with vite, and working on as a plain node script https://stackblitz.com/edit/stackblitz-starters-xug1ib?file=index.js Most likely you are running into an issue with either a build tool (most likely) or with pnpm (also possible).

Huh, super weird! It looks like there is an issue when running on pnpm: https://stackblitz.com/edit/stackblitz-starters-kwh7sk?file=index.js

I'll take compare the package-lock.json and pnpm-lock.yml to see if there's a difference in the modules that are getting resolved

rrcobb · 2023-10-04T17:23:54Z

It seems like it's probably a peer module resolution issue? https://pnpm.io/how-peers-are-resolved seems like the most likely difference in the resolution algorithms that pnpm and npm use

rrcobb · 2023-10-04T17:39:19Z

Huh. it seems like it's not a pnpm issue after all, but is instead a parsing error because I used invalid syntax, and it threw this weird index error.

I had the (bad, not working):

const source = `
Lift($$L$$) can be determined by Lift Coefficient ($$C_L$$) like the following
equation.

$$
L = \frac{1}{2} \rho v^2 S C_L
$$
`;

where your repro had the (good, working):

const source = `
Lift($$L$$) can be determined by Lift Coefficient ($$C_L$$) like the following
equation.

$$
L = \\frac{1}{2} \\rho v^2 S C_L
$$
`;

note the double \\ in the string.

Maybe should be a better error message, but not a package manager issue.

rrcobb · 2023-10-04T17:40:12Z

fwiw, I had copied mine right from https://github.com/remarkjs/remark-math#example-katex

I assumed it was correct as rendered, but it was not!

wooorm · 2023-10-04T18:07:01Z

I assumed it was correct as rendered, but it was not!

What is going on here is that you paste markdown inside a JavaScript string and assume it works exactly the same.
That is not the case.
If you paste \ inside a JavaScript string, it crashes.
What seems to be going on here is that \f in JS means things, which it doesn’t in markdown.

wooorm · 2023-10-04T18:15:42Z

I assumed this was an error on our side, but it’s not in micromark/mdast:

import {micromark} from 'micromark'
import {math, mathHtml} from 'micromark-extension-math'

const source = `
Lift($$L$$) can be determined by Lift Coefficient ($$C_L$$) like the following
equation.

$$
L = \frac{1}{2} \rho v^2 S C_L
$$
`

const output = micromark(source, {
  extensions: [math()],
  htmlExtensions: [mathHtml()]
})

console.log(output)

->

    var self = new Error(error);
               ^

ParseError: KaTeX parse error: Unexpected character: '
                                                      ' at position 5: L = 
ho v…                                                                      ̲rac{1}{2} 
    at new ParseError (file:///Users/tilde/Projects/oss/micromark-extension-math/node_modules/katex/dist/katex.mjs:147:16)
    at Lexer.lex (file:///Users/tilde/Projects/oss/micromark-extension-math/node_modules/katex/dist/katex.mjs:14950:13)
    at MacroExpander.future (file:///Users/tilde/Projects/oss/micromark-extension-math/node_modules/katex/dist/katex.mjs:16146:33)
    at MacroExpander.popToken (file:///Users/tilde/Projects/oss/micromark-extension-math/node_modules/katex/dist/katex.mjs:16157:10)
    at MacroExpander.expandOnce (file:///Users/tilde/Projects/oss/micromark-extension-math/node_modules/katex/dist/katex.mjs:16359:25)
    at MacroExpander.expandNextToken (file:///Users/tilde/Projects/oss/micromark-extension-math/node_modules/katex/dist/katex.mjs:16431:16)
    at Parser.fetch (file:///Users/tilde/Projects/oss/micromark-extension-math/node_modules/katex/dist/katex.mjs:17168:36)
    at Parser.consumeSpaces (file:///Users/tilde/Projects/oss/micromark-extension-math/node_modules/katex/dist/katex.mjs:17719:17)
    at Parser.parseAtom (file:///Users/tilde/Projects/oss/micromark-extension-math/node_modules/katex/dist/katex.mjs:17421:12)
    at Parser.parseExpression (file:///Users/tilde/Projects/oss/micromark-extension-math/node_modules/katex/dist/katex.mjs:17271:23) {
  position: 4,
  length: 1,
  rawMessage: "Unexpected character: '\f'"
}

Node.js v20.5.1

KaTeX throws a rather readable error.
Looking at your error again, the error is in mathjax.

You’re supplying a \f (form feed) in the math, but the tools you use don’t understand that as math. Escape it: \\f.

rrcobb · 2023-10-04T19:01:47Z

Thanks @wooorm that clarifies things quite a bit. The rendered version in github is different from what the raw string in js should be, which tripped me up.

I'lll open an issue in MathJax about the error message, it looks like it's on their end not the unified ecosystem

ChristianMurphy · 2023-10-04T19:13:19Z

I'll open an issue in MathJax about the error message, it looks like it's on their end not the unified ecosystem

Passing an invalid character into MathJax, and it reporting that it is invalid doesn't feel like a bug in unified or MathJax.
It's more understanding how template strings work.

github-actions bot added 👋 phase/new Post is being triaged automatically 🤞 phase/open Post is being triaged manually and removed 👋 phase/new Post is being triaged automatically labels Oct 4, 2023

ChristianMurphy closed this as not planned Won't fix, can't repro, duplicate, stale Oct 4, 2023

ChristianMurphy added the 🙋 no/question This does not need any changes label Oct 4, 2023

This comment has been minimized.

Sign in to view

github-actions bot added 👎 phase/no Post cannot or will not be acted on and removed 🤞 phase/open Post is being triaged manually labels Oct 4, 2023

wooorm added the 👀 no/external This makes more sense somewhere else label Oct 4, 2023

github-actions bot removed the 🙋 no/question This does not need any changes label Oct 4, 2023

This comment was marked as resolved.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MathJax error -- TypeError: Cannot read properties of null (reading '4') #88

MathJax error -- TypeError: Cannot read properties of null (reading '4') #88

rrcobb commented Oct 4, 2023

ChristianMurphy commented Oct 4, 2023

This comment has been minimized.

rrcobb commented Oct 4, 2023 •

edited

Loading

rrcobb commented Oct 4, 2023

rrcobb commented Oct 4, 2023

rrcobb commented Oct 4, 2023

wooorm commented Oct 4, 2023

wooorm commented Oct 4, 2023

This comment was marked as resolved.

rrcobb commented Oct 4, 2023

ChristianMurphy commented Oct 4, 2023

MathJax error -- TypeError: Cannot read properties of null (reading '4') #88

MathJax error -- TypeError: Cannot read properties of null (reading '4') #88

Comments

rrcobb commented Oct 4, 2023

Initial checklist

Affected packages and versions

Link to runnable example

Steps to reproduce

Expected behavior

Actual behavior

Runtime

Package manager

OS

Build and bundle tools

ChristianMurphy commented Oct 4, 2023

This comment has been minimized.

rrcobb commented Oct 4, 2023 • edited Loading

rrcobb commented Oct 4, 2023

rrcobb commented Oct 4, 2023

rrcobb commented Oct 4, 2023

wooorm commented Oct 4, 2023

wooorm commented Oct 4, 2023

This comment was marked as resolved.

rrcobb commented Oct 4, 2023

ChristianMurphy commented Oct 4, 2023

rrcobb commented Oct 4, 2023 •

edited

Loading