[gatsby-plugin-mdx] Tables created in markdown files are not displayed properly in the browser

[RazvanRauta]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• [X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Tables defined in Markdown files are displayed as paragraphs when using gatsby-plugin-mdx, it works as expected with gatsby-transformer-remark.

Live Demo

Repo

MD File with table

Reproduction Link

https://github.com/RazvanRauta/my-blog-starter

Steps to Reproduce

1. clone my-blog-starter
2. start the project
3. go to http://localhost:8000/hello-world/
4. see the broken table ...

Expected Result

Display the table using the appropriate HTML tags for tables.

Actual Result

The table is displayed using <p> tags

Environment

System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M2
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.0.0 - ~/.nvm/versions/node/v19.0.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.4.2 - ~/.nvm/versions/node/v19.0.0/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
    Firefox: 111.0.1
    Safari: 16.3
  npmGlobalPackages:
    gatsby-cli: 5.8.0

Config Flags

No response

[RazvanRauta]

Fixed:

Run:

npm i -D remark-gfm@1.0.0 ( newer version requires ESM )

Then in gatsby-config.js update the gatsby-plugin-mdx config like:

...

    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.md`, `.mdx`],
    +   mdxOptions: {
    +    remarkPlugins: [
    +       require('remark-gfm'), // <= was missing this
    +    ],
    +   },
        gatsbyRemarkPlugins: [
           ....
        ],
      },
    },

    ....