remarkjs/remark-math

Cannot read properties of undefined (reading 'mathFlowInside')

twobit opened this issue · 14 comments

twobit commented

Initial checklist

Affected packages and versions

remark-math@6

Link to runnable example

No response

Steps to reproduce

Using block LaTeX formatting causes an error:

$$
\theta
$$

Expected behavior

Block LaTeX formatting should be supported.

Actual behavior

Cannot read properties of undefined (reading 'mathFlowInside')

Runtime

Node v17

Package manager

npm 8

OS

macOS

Build and bundle tools

Next.js

twobit commented

Looks like Nextra ran into this issue too:

ad7b31b0: downgrade remark-math from `6` to `5.1.1` to fix
  `TypeError: Cannot read properties of undefined (reading 'mathFlowInside')`
  error
  • 👍2
ChristianMurphy commented

@twobit your remark and remark-math versions need to be matched, both can be latest major, or both can be previous major, but the two major lines cannot be mixed.
Either upgrade both at the same time, or hold both on the previous major

github-actions commented

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

lloydjatkinson commented

Can you expand on how they should match? I have the same issue and the majors are no where near each other?

image

wooorm commented

That should work. You probably use something else too?

lloydjatkinson commented

I have the following (it's an Astro site):

    "rehype-katex": "^7.0.0",
    "rehype-mathjax": "^5.0.0",
    "rehype-slug": "^6.0.0",
    "remark": "^15.0.1",
    "remark-math": "^6.0.0",
    "remark-mdx": "^2.3.0",
    ...
    "@astrojs/mdx": "^1.1.2",

With the following MDX file:

---
dates:
   published: 2023-08-31T09:53:07+0000
---
Trying out maths rendering via markdown.

This is an inline *equation:* $$V_{sphere} = \frac{4}{3}\pi r^3$$, followed by a display style equation after lots more lines of paragraph to test vertical alignment of inline expressions as well as the standalone expressions.
Here is also some **styled text**.

This is another inline expression $$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$ followed by a normal expression, which align to the ___middle___ of the content:

$$

And the following setup:

export default defineConfig({
    markdown: {
        remarkPlugins: [remarkMath],
    },
    integrations: [
        astroExpressiveCode({
            theme: 'light-plus',
            styleOverrides: {
                borderRadius: () => '0',
            },
            frames: {
                styleOverrides: {
                    frameBoxShadowCssValue: 'none',
                },
            },
        }),
        preact({
            include: ['**/preact/*'],
        }),
        react({
            include: ['**/react/*'],
        }),
        mdx({
            rehypePlugins: [
                [rehypeSlug],
                [rehypeMathJax],
            ],
        }),
    ],
});
wooorm commented

Thanks for providing more info.
The remark package you have is not used.
The remark plugins are used inside MDX.
MDX is not yet updated.
Uninstall remark, downgrade remark-gfm.
When MDX is updated, update everything.

lloydjatkinson commented

Unfortunately I believe remark-gfm is brought in by Astro

wooorm commented

I’d assume they have a working version?

FriendlyLifeguard commented

I also had this issue until I used this tutorial : https://ileumas.com/writing/2022/03/astro-math-katex/
as well as enclosing the equation by $$ on the same line .

This is my astro.config.js :

import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

// https://astro.build/config
export default defineConfig({
	// ! Please remember to replace the following site property with your own domain
	site: "https://alankang.xyz",
	markdown: {
		remarkPlugins: [remarkUnwrapImages, remarkReadingTime, remarkMath],
		remarkRehype: { footnoteLabelProperties: { className: [""] } },
		shikiConfig: {
			theme: "dracula",
			wrap: true,
		},
		rehypePlugins: [
			[rehypeKatex, {}]
		]
	},
wooorm commented

The footnoteLabelProperties looks weird? You likely shouldn’t set that at all.

As for remark-gfm I mentioned earlier, that should’ve been remark-math

yklcs commented

Astro is currently on remark-parse/unified 10, which is incompatible with remark-math 6, giving the error Cannot read properties of undefined (reading 'mathFlowInside'). Downgrading to remark-math 5 solved this issue for me.

  • 👍2
iwasrobbed commented

Had this same issue today even with both math modules on latest major versions (using alongside remark-gfm)

Also had to put in a declare module for mathjax (even though it said it was TypeScript safe) before it'd pick it up as a module.

Downgrading feels like it's stepping around the issue(s), seems like others here have the same confusion

👉 What's the proper way to fix? Update GFM? Something else I'm missing?

ChristianMurphy commented

@iwasrobbed reading the thread would help.
To reiterate, make sure all of your remark and mdx packages are at the latest version.
If you are using remark or mdx though another framework like next or astro. Make sure you are using the latest version of their framework and that they have the latest version of remark and mdx.

Locking this thread as resolved "same" follow up comments don't add anything.
If folks have a specific question, the Q&A forum is open.
https://github.com/orgs/remarkjs/discussions
Please specify how you are using remark and remark math, and the specific versions being used.