Tables not parsing with remarkGfm

[landed1]

Describe the bug

Summary

I am using MDX files for content for a static site. The files sit in a folder and I am using a utility function along with compileMDX.

  try {
    const source = await fs.promises.readFile(filePath, 'utf8')

    const { frontmatter, content } = await compileMDX<MdxFrontmatter>({
      source,
      options: {
        parseFrontmatter: true,
          remarkPlugins: [remarkGfm],
          format: 'mdx',
      }
    })

    return {
      ...frontmatter,
      slug: path.basename(filePath, '.mdx'),
      content
    }

Trying to use like this

<article className='prose max-w-none'>
<MDXRemote source={content} />
<h2>Raw content below works but TABLE md not parsed</h2>
<div>{content}</div>
</article>

Additional information

I have checked most of the bugs and related things I can see online.
Some things which helped get mdx working
mdx-components.tsx in the root folder not app!
delete .next folder
Adding the correct next config to support MDX
The remarkGFM plugin doesn't work so I see the md table content not the html. because I could use

{content}

as this seems to work ok. I also get my front matter ok and so the issues are just the and table parsing.

Thank you for help my package:

  "dependencies": {
    "@mdx-js/loader": "^3.1.0",
    "@mdx-js/mdx": "2.0.0-rc.2",
    "@mdx-js/react": "2.0.0-rc.2",
    "@next/mdx": "^15.0.4",
    "@nextui-org/react": "^2.6.4",
    "@types/mdx": "^2.0.13",
    "contentlayer": "^0.3.4",
    "date-fns": "^4.1.0",
    "framer-motion": "^11.13.1",
    "gray-matter": "^4.0.3",
    "mdx-bundler": "^10.0.3",
    "next": "15.0.4",
    "next-mdx-remote": "^5.0.0",
    "next-seo": "^6.6.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "rehype-stringify": "^10.0.1",
    "remark-gfm": "3.0.1",
    "remark-rehype": "^11.1.1"
  },

Example

No response

Reproduction

sorry

next-mdx-remote version

5.0.0

[talatkuyuk]

You use all weapons: mdx-bundler, next-mdx-remote, @next/mdx etc.

The issue is not related with "next-mdx-remote", maybe related with wrong app structure. We can’t really help without a minimal reproduction.

[newarifrh]

I faced the same issue, and after trying a few solutions, I found that if you are using mdxRemote, the remarkGfm configuration needs to be explicitly added to the MDXRemote options. Here’s what worked for me:

import remarkGfm from "remark-gfm";

const ArticlePage = async ({
  params,
}: {
  params: Promise<{ slug: string }>;
}) => {
  const slug = (await params).slug;
  const article = await getArticle(slug);

  if (!article) notFound();

  return (
    <div className="bg-white p-8 rounded-md">
      <MDXRemote
        source={article.content}
        options={{
          mdxOptions: {
            remarkPlugins: [remarkGfm],
          },
        }}
      />
    </div>
  );
};

[talatkuyuk]

Hi @newarifrh thank you for clarification.

next-mdx-remote does not process Markdown/MDX syntax itself. Instead, all Markdown parsing is handled through plugins. This means we must always include the necessary plugins in mdxOptions. For example, remark-gfm ensures support for tables in Markdown, so it should be explicitly added to the plugin chain.

However, this doesn't resolve the issue. @landed1 has already included remark-gfm in the plugin chain. I want to emphasize that if tables still don't work in Markdown despite remark-gfm being added, the project's structure might be incorrectly configured.