How do you use this with Meteor & config options?

[ajaypillay]

Hi, I am making use of this Meteor package, apollinaire:mdx which gives the ability to import MDX files using this library.

Unfortunately this package doesn't support the passing of options, so I'm trying to hardcode it in, as I require LaTeX support through the remark-math and rehype-katex packages.

I tried passing in the necessary config options in this line but when I console log jsx, I don't see the Math being parsed in my MDX file.

In package.json, I have passed in the necessary dependencies so that it's aware of said packages.

I tried to import remarkMath from "remark-math" and when I console logged it in the constructor, it was defined but in the compile function it was undefined. I fixed this by changing it to const remarkMath = require("remark-math") and then it was defined in the compile function. Not really sure why this was the case.

But when I pass the config options in as such:

const jsx = mdx.sync(content, { remarkPlugins: [remarkMath], rehypePlugins: [rehypeKatex]})

And when I log jsx, I see everything being parsed correctly except the LaTeX example, which is copied verbatim from the Math blocks page in the MDX docs.

Just for sanity's sake - it's not the CSS that's being messed up, the Math is just contained within <p> tags and that's it, there's no added HTML tags.

How should I be setting this up correctly?

For more information:

1. I had to add the babel-runtime Meteor package and @babel/runtime NPM package, as it was complaining about those when I tried to add this custom package in my Meteor packages folder. I named this package foo.

[ChristianMurphy]

What version of MDX and remark math are you using?
MDX 1 needs remark-math <4.
MDX 2 needs remark-math >=4.

[ajaypillay]

Thank you for pointing this out. I'm still trying to debug this further. So at the time of opening this thread my versions were:

 Package.registerBuildPlugin({
   name: 'compile-mdx',
   use: [
     'ecmascript',
     'babel-runtime',
     '[email protected]',
     '[email protected]',
   ],
   sources: [
     'compiler.js',
     'plugin.js',
   ],
   npmDependencies: {
     '@mdx-js/mdx': '1.6.22',
     "rehype-katex": "5.0.0",
     "remark-gfm": "1.0.0",
     "remark-math": "4.0.0",
     '@babel/runtime': '7.14.0'
   },
 });

But now I've changed the versions to:

"rehype-katex": "4.0.0"
"remark-math": "3.0.1"

Now I can see the tags being output in my console but in my browser I'm getting the following error:

I'm still trying to figure this bit out and will update once I do.

I don't see any more MDXTag elements so I don't think I need that import anymore, looks like I need to import MDXContent or something else mdx?

I tried to add on the line import mdx from "@mdx-js/mdx" into jsxComplete:

const jsx = mdx.sync(content, { remarkPlugins: [remarkMath], rehypePlugins: [rehypeKatex]});
console.log(jsx);
const jsxComplete = `
import React from 'react'
import { MDXTag } from '@mdx-js/tag'
${jsx}
`;

But then my browser throws the error Uncaught TypeError: [BABEL] unknown: Cannot read property 'explode' of undefined and it gets thrown recursively so I have to close the tab. Not sure if this is a version issue as well, but I don't think it is.

[ajaypillay]

So this is the closest I've gotten so far.

import MDX from "./directory/test.mdx"
console.log(MDX)

This is what is logged in my browser:

If I actually render the <MDX /> component somewhere, I get the same error thrown on my server that mdx is not defined as per my server: Error running template: ReferenceError: mdx is not defined (I'm using SSR).

I see mdx in the return statement but it's not included anywhere in the file. Where do I need to include mdx from? I tried import mdx from "@mdx-js/mdx" and const mdx = require("@mdx-js/mdx) but they both cause the infinite error loop as described above.

[ChristianMurphy]

The loader includes the appropriate version of MDX and the framework for rendering (react, vue, preact, etc).

mdx/packages/loader/index.js

Lines 4 to 37 in 907bd26

	const DEFAULT_RENDERER = `
	import React from 'react'
	import {mdx} from '@mdx-js/react'
	`
	const pragma = `
	/* @jsxRuntime classic */
	/* @jsx mdx */
	/* @jsxFrag mdx.Fragment */
	`
	const compilerCache = new Map()
	module.exports = async function (content) {
	if (!compilerCache.has(this.query)) {
	const {renderer = DEFAULT_RENDERER, ...opts} = getOptions(this)
	compilerCache.set(this.query, [renderer, createCompiler(opts)])
	}
	const callback = this.async()
	const [renderer, compiler] = compilerCache.get(this.query)
	let result
	try {
	result = await compiler.process({
	contents: content,
	path: this.resourcePath
	})
	} catch (err) {
	return callback(err)
	}
	const code = `${renderer}${pragma}${result}`

It looks like meteor's is using outdated imports for MDX 1 https://github.com/Apollinaire/meteor-mdx/blob/0cee4c6ecc664c8a0341fee0cb1dff324b4fa14f/compiler.js#L73-L77

[ajaypillay]

Thank you! I removed the MDXTag import since it's not needed anymore and I included import { mdx } from '@mdx-js/react' and it works perfectly now.