Compatibility issues between gatsby-plugin-mdx v5 and remark-gfm v4

[comnori]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• 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

I tried to activate remark-Gfm by referring to the https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxoptions document.

However, the development build failed with the ERROR #gatsby-plugin-mdx_10001 PLUGIN error.

At first, I thought it was a configuration issue and referred to Github Issue and StackOverflow, but couldn't find anything different.

I thought it was a difference in the environment, so the remark-Gfm versions of the sources that worked normally were 3.0.1, and mine was 4.0.0.

After changing the version to 3.0.1, it was confirmed to work normally.

Accordingly, I am raising an issue as I believe there is a version compatibility issue between gatsby-plugin-mdx and remark-Gfm.

Reproduction Link

https://codesandbox.io/p/devbox/distracted-platform-4nhsw5

Steps to Reproduce

1. yarn add gatsby-plugin-mdx remark-gfm
2. https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxoptions Set according to the document
3. gatsby develop
4. Error occurred
5. Change to remark-gfm v3 version
6. works normally
   ...

Expected Result

When connecting to /post/post-1, the page is displayed normally.

Actual Result

ERROR #gatsby-plugin-mdx_10001 PLUGIN

Failed to compile the file "/workspace/src/posts/post-1.mdx". Original error
message:

Cannot read properties of undefined (reading 'inTable')

Environment

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (4) x64 AMD Ryzen 7 3700X 8-Core Processor
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.10.0 - /usr/local/share/nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.21 - /usr/local/share/nvm/versions/node/v20.10.0/bin/yarn
    npm: 10.2.3 - /usr/local/share/nvm/versions/node/v20.10.0/bin/npm
  npmPackages:
    gatsby: ^5.13.0 => 5.13.1
    gatsby-plugin-google-gtag: ^5.13.0 => 5.13.0
    gatsby-plugin-image: ^3.13.0 => 3.13.0
    gatsby-plugin-manifest: ^5.13.0 => 5.13.0
    gatsby-plugin-mdx: ^5.13.0 => 5.13.0
    gatsby-plugin-sharp: ^5.13.0 => 5.13.0
    gatsby-plugin-sitemap: ^6.13.0 => 6.13.0
    gatsby-remark-katex: ^7.13.0 => 7.13.0
    gatsby-remark-prismjs: ^7.13.0 => 7.13.0
    gatsby-source-filesystem: ^5.13.0 => 5.13.0
    gatsby-transformer-remark: ^6.13.0 => 6.13.0
    gatsby-transformer-sharp: ^5.13.0 => 5.13.0

Config Flags

No response

[x39x]

I’ve encountered a TypeError while using remark-gfm version 4.0.0 in conjunction with Gatsby. The error message is as follows:

TypeError: Cannot read properties of undefined (reading 'inTable')

it appears that this issue stems from the recent major release of remark-gfm. In the remark-gfm issue tracker, it is mentioned:

The major releases are still rolling out across the remark and mdx projects.
Check if the project you use has a new major update.
If there is, try out the new version.
If not, be patient, it takes time to update 500+ packages.

To save users a lot of time and confusion, I suggest updating the Gatsby documentation to highlight the compatibility issue with remark-gfm version 4.0.0. A note specifying the recommended versions of remark-gfm to use would be greatly beneficial.

Thank you for your attention to this matter.