Simplest MDX parser throws this.getData() error. What am I missing?

[tohagan]

My objective is to be able to parse to AST and later convert the AST back via stringify to a similar MDX file. Input MDX files contain frontmatter, markdown and MDX code. I just want to extact markdown text strings in the AST and some of the frontmatter fields and have the parser recognise but leave the MDX code unchanged.

I've got this all working with Frontmatter and Markdown parsers

This works fine ...

const processor = remark().use(frontmatter, ['yaml']).use(stringify);
const ast = processor.parse(markdownIn); 
const markdownOut = processor.stringify(ast);

But once I add the MDX parser it blows up with the exception shown below.

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkStringify from "remark-stringify";
import remarkMdx from "remark-mdx";

import { it, describe, expect } from "vitest";

describe("MDX parse and stringify", () => {
  it("should parse MDX with no code", () => {
    const mdxIn = `
    ---
    title: My MDX Post
    date: 2023-10-16
    ---

    # This is an MDX post

    With some content and a JSX component: <MyComponent />
    `;

    const processor = unified()
      .use(remarkParse)
      .use(remarkMdx)
      .use(remarkStringify);

    // Parse markdown to AST
    const ast = processor.parse(mdxIn);  //  << THROWS 
    console.log("ast>>", JSON.stringify(ast, null, 2));

    const mdxOut = processor.stringify(ast);
    console.log("mdxOut>>", mdxOut);
    expect(mdxOut).toEqual(mdxIn);
  });
});

Throws this exception ...

 FAIL  test/translate/Mdx.spec.ts > MDX parse and stringify > should parse MDX with no code        
TypeError: this.getData is not a function
 ❯ Object.enterMdxJsxTag node_modules/mdast-util-mdx-jsx/lib/index.js:168:15
 ❯ compile node_modules/remark-parse/node_modules/mdast-util-from-markdown/lib/index.js:337:40     
 ❯ fromMarkdown node_modules/remark-parse/node_modules/mdast-util-from-markdown/lib/index.js:173:27 ❯ parser node_modules/remark-parse/lib/index.js:33:12
 ❯ Function.parse node_modules/unified/lib/index.js:668:12
 ❯ test/translate/Mdx.spec.ts:28:27
     26| 
     27|     // Parse markdown to AST
     28|     const ast = processor.parse(mdxIn);
       |                           ^
     29|     console.log("ast>>", JSON.stringify(ast, null, 2)); // KEEP
     30| 

  /**
   * @this {CompileContext}
   * @type {FromMarkdownHandle}
   */
  function enterMdxJsxTag(token) {
    /** @type {Tag} */
    const tag = {
      name: undefined,
      attributes: [],
      close: false,
      selfClosing: false,
      start: token.start,
      end: token.end
    }
    if (!this.getData('mdxJsxTagStack')) this.setData('mdxJsxTagStack', [])   <<< THROWS exception here
    this.setData('mdxJsxTag', tag)
    this.buffer()
  }

[wooorm]

#2373. Done in a couple days!

[tohagan]

Thanks for your quick response.

I'm also seeing a TypeScript type mismatch warning and I think I saw a note in your code to ignore this so I'm assuming it also on the TODO list.

[wooorm]

Yes, actively working on it.

[tohagan]

Upgraded to 3.0.0 and it's working perfectly. Awsome work! Thanks enormously.