Cannot read properties of undefined (reading 'mathFlowInside')

[twobit]

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-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]

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

[ChristianMurphy]

@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

[lloydjatkinson]

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

[wooorm]

That should work. You probably use something else too?

[lloydjatkinson]

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]

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]

Unfortunately I believe remark-gfm is brought in by Astro

[wooorm]

I’d assume they have a working version?

[FriendlyLifeguard]

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]

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]

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.

[iwasrobbed]

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]

@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.