Convert markdown to mdast tree with gfm extention don't work (Cannot set properties of undefined (setting 'inTable'))

[nicolasjorgevera]

I try to convert an .md file to a mdast tree(JSON) using a gfm extention in Next.js 13 and I got an Typescript in VSC and Next.js "Cannot set properties of undefined (setting 'inTable')" error in the browser.

The code is the next one:

"use server"
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { fromMarkdown } from "mdast-util-from-markdown"
import { gfm } from 'micromark-extension-gfm'
import { gfmFromMarkdown, gfmToMarkdown } from 'mdast-util-gfm'

const postsDirectory = path.join(process.cwd(), 'blogposts');

export async function getPostDataToEdit (id: string) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
  const matterResult = matter(fileContents);

  const tree = fromMarkdown(fileContents,'utf8' , {
    extensions: [gfm()],
    mdastExtensions: [ gfmFromMarkdown() ]
  })

  const blogPost: BlogPost & {  body: any } = {
    id,
    title: matterResult.data.title,
    date: matterResult.data.date,
    published: matterResult.data.published ? "Published" : "Draft",
    body: tree,
  }

  return blogPost;
}

The typescript error is:

The Next.js error is:

I read the documentation of mdast-util-from-markdown and mdast-util-gfm and couldn't solve this. If I remove the extention section from the function "fromMarkdown" works just fine but without idenifying the gfm markdown on the file, just only common markdown.

The code without extention section:

"use server"
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { fromMarkdown } from "mdast-util-from-markdown"
import { gfm } from 'micromark-extension-gfm'
import { gfmFromMarkdown, gfmToMarkdown } from 'mdast-util-gfm'

const postsDirectory = path.join(process.cwd(), 'blogposts');

export async function getPostDataToEdit (id: string) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
  const matterResult = matter(fileContents);

  const tree = fromMarkdown(fileContents,'utf8' , {
  })

  const blogPost: BlogPost & {  body: any } = {
    id,
    title: matterResult.data.title,
    date: matterResult.data.date,
    published: matterResult.data.published ? "Published" : "Draft",
    body: tree,
  }

  return blogPost;
}

Please 🙏, can you help me?

Thanks!!

[wooorm]

can you post versions?

Can you post fileContents? Important: first make fileContents as small as possible to reproduce the error.

[ChristianMurphy]

@nicolasjorgevera it sounds like you are trying to do a mix of serverside and clientside rendering with next.js?
Could you share a runnable example of what you're trying? Even with the dependencies, there are a lot of pieces of your setup which are missing which make it hard to replicate.
https://next.new is a good sandbox started focus on reducing it to an MRE https://stackoverflow.com/help/minimal-reproducible-example

[nicolasjorgevera]

Hi Christian, basicly I try to mount a blog editor. That function is call to read an especific post in a .md file, transform the markdown to mdast tree (JSON) and return it. All this actions occurs in the server side. It's work fine without GFM extentions.

Unafortunely, this not work on stackblitz (I tryed) but I deployed it on Vercel and works (always without GFM).

If you like to see all the code and this "demo" on vercel you let me know.

[ChristianMurphy]

Unafortunely, this not work on stackblitz (I tryed) but I deployed it on Vercel and works (always without GFM).

If the issue can't be replicated outside of Vercel/Next, it sounds like a bug in the Next framework/build tool itself, it works fine with other frameworks.
The Next community may be able to offer better support https://github.com/vercel/next.js/discussions
Though without a MRE, it may be challenging for them as well.

transform the markdown to mdast tree (JSON) and return it.

Using the AST as a wire protocol probably isn't what you are looking for, see the discussion in https://github.com/orgs/unifiedjs/discussions/188#discussioncomment-2466114
Consider rendering fully server side or fully client side, rather than a bespoke mix.

[wooorm]

You’re probably getting this error because some dependencies are out of date. Make sure every micromark and mdast package is at the latest.

[nicolasjorgevera]

@wooorm I update de depencencies and work! Thanks!!!

Thank you all!!