Rendering Markdown table in NextJS mdx

To have a blog site that uses MDX file format to render blog post, Utilizing NextJS probably the easiest way for most users. Vercel provides the Portfolio template to easily get started with the whole blog system. You can get Portfolio Starter Kit here.

Rendering Table via markdown is not a Common Mark feature but a Github Flavoured Markdown Extension. All the Extension of the Github Flavoured Markdown (GFM) can be found here

NextJS uses next-mdx-remote for MD and MDX data parsing and rendering. For this Blog it is using next@14.2.x with next-mdx-remote@4.4.x. To render Tables we need to use remark-gfm in the project and use it as optional plugin in for next-mdx-remote.

This is how we setup the remark-gfm

• Install remark-gfm using pnmp or npm. For Portfolio Starter Kit pnpm is recommended by Vercel.

// type this in terminal
pnpm add remark-gfm

• In your mdx.tsx file define a constant variable like this

// mdx.tsx
const options = {
  mdxOptions: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [],
  },
};

• We will pass this variable as the options for <MDXRemote> component. Like the source code below

// mdx.tsx
export function CustomMDX(props) {
  return (
    <MDXRemote
      {...props}
      components={{ ...components, ...(props.components || {}) }}
      options={options} // Addition
    />
  );
}

Issue:

Even though the setup is correct we get an error of this type. This case the application doesn't render at all.

// github issue : https://github.com/hashicorp/next-mdx-remote/issues/403#issuecomment-1743827064
error {
  name: 'Error',
  source: 'server',
  message: '[next-mdx-remote] error compiling MDX:\n' +
    "Cannot set properties of undefined (setting 'inTable')\n" +
    '\n' +
    'More information: https://mdxjs.com/docs/troubleshooting-mdx',
  stack: '',
  digest: '199367153'
}

Resolve :

To resolve the issue we can use this Github Issue as first step. This assures that downgrading remark-gfm 3.x does work with nextJS. As mentioned in this comment

And it does work ! Here is the proof !