This article explains how to fix the issue where tables do not appear after switching from MD to MDX in Gatsby.js.

Related Plugins and Cause

Plugins

• gatsby-plugin-mdx
• remark-gfm

Possible Cause

There was an incorrect configuration in the config file.

Additionally, certain plugin versions may not work properly.

Downgrading remark-gfm

I was originally using version 4, but encountered the following error:

Cannot set properties of undefined (setting 'inTable')

To fix this, I downgraded to version 3.0.1 with:

npm install remark-gfm@3.0.1 --save

Changing gatsby.config.js to gatsby.config.mjs

Since I needed to use import in the config file, I renamed it to gatsby.config.mjs and updated the existing code accordingly.

The only major change was replacing:

module.exports = {

with:

export default {

This allowed the use of import, so I added the plugin as follows:

gatsby.config.mjs

import remarkGfm from "remark-gfm"

//~~~~~~

{
  resolve: `gatsby-plugin-mdx`,
  options: {
    mdxOptions: {
      remarkPlugins: [remarkGfm], // Added
    },
    extensions: [`.mdx`, `.md`],
    gatsbyRemarkPlugins: [
      // Omitted
  },
}

Conclusion

This was the solution that worked for me.

I hope this helps someone facing the same issue.

I originally thought it would be simple to build a database using Markdown, retrieve data from Markdown files, and display it on a page. However, it ended up taking too much time, and I now regret not just creating the page in pages using JavaScript from the start. Such is my spring day (cloudy) reflection.