serialize() doesn't load remark/rehype plugins

I’m trying to use KaTeX, but so far I have failed:

const source = await serialize("Hello *world* and $1+1=2$ math mode", {
  scope: {},
  mdxOptions: {
    remarkPlugins: [],
    rehypePlugins: []
  },
});

and

const source = await serialize("Hello *world* and $1+1=2$ math mode", {
  scope: {},
  mdxOptions: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [rehypeKatex]
  },
});

give exactly the same source.

console.log(source) output

{
  compiledSource: 'var D=Object.defineProperty,M=Object.defineProperties;var X=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var m=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;var u=(o,t,e)=>t in o?D(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e,a=(o,t)=>{for(var e in t||(t={}))m.call(t,e)&&u(o,e,t[e]);if(p)for(var e of p(t))r.call(t,e)&&u(o,e,t[e]);return o},s=(o,t)=>M(o,X(t));var y=(o,t)=>{var e={};for(var n in o)m.call(o,n)&&t.indexOf(n)<0&&(e[n]=o[n]);if(o!=null&&p)for(var n of p(o))t.indexOf(n)<0&&r.call(o,n)&&(e[n]=o[n]);return e};const layoutProps={},MDXLayout="wrapper";function MDXContent(e){var n=e,{components:o}=n,t=y(n,["components"]);return mdx(MDXLayout,s(a(a({},layoutProps),t),{components:o,mdxType:"MDXLayout"}),mdx("p",null,"Hello ",mdx("em",{parentName:"p"},"world")," and $1+1=2$ math mode"))}MDXContent.isMDXComponent=!0;\n',
  scope: {}
}

Of course the rendered output doesn’t have any math at all. Everything else works as expected (“world” is in italic for example). So the two plugins aren’t loaded.

I must be missing some very obvious configuration steps here… but what’s wrong?

Version numbers in case they are relevant:

"next": "12.0.7",
"next-mdx-remote": "^3.0.8",
"rehype-katex": "^6.0.2",
"remark-math": "^5.1.1",

[BRKalow]

This is likely due to the fact that we’re relying on an older version of remark along with mdx v1, as others have found.

If you would like, give next-mdx-remote@next a try, which uses mdx v2 under the hood and should be compatible with these packages. Otherwise, the alternative is to adjust the versions as @subwaymatch has outlined.

[subwaymatch]

I also ran into the same issue and took me a while to find out that this was a version issue.

Downgrading remark-math to 3.0.0 or 3.0.1 seems to work. This is also briefly mentioned in https://github.com/hashicorp/next-mdx-remote/issues/148.

There is a Codesandbox example created by @timlrx at https://codesandbox.io/s/katex-forked-jegb7?file=/pages/index.js that renders KaTex correctly. The versions used in the example are:

• remark: 12.0.1
• remark-math: 3.0.0
• rehype-katex: 5.0.0
• rehype-parse: 9.0.0

I would love to find out if anyone has made KaTeX to work with the latest versions of plugin packages. 🧐