gatsby-plugin-mdx v2 + remark-gfm not working

[pelikhan]

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

Trying to add remark-gfm to the MDX v2.0 gatsby-plugin-mdx configuration and hitting a runtime error. I was following the guide to load a ESM module in gatsby-config.js from the plugin README.

Reproduction Link

https://codesandbox.io/s/mystifying-northcutt-74fhgj?file=/gatsby-config.js

Steps to Reproduce

1. open codesandbox demo of gatsby-plugin-mdx (reference in releases)
2. upgrade remark-gfm depency to ^3 in package.json
3. add to gatsby-config.js

const wrapESMPlugin = (name) =>
  function wrapESM(opts) {
    return async (...args) => {
      const mod = await import(name);
      const plugin = mod.default(opts);
      return plugin(...args);
    };
  };

4. Update mdxOptions in gatsby-config

        mdxOptions: {
          remarkPlugins: [wrapESMPlugin(`remark-gfm`)]
        },

Expected Result

Gatsby demo site compiles.

Actual Result

ccess onPreExtractQueries - 0.000s
success extract queries from components - 4.115s
success write out requires - 0.005s
success run static queries - 0.009s - 1/1 117.30/s
success run page queries - 0.182s - 7/7 38.39/s
error Failed to compile the file "/sandbox/src/pages/chart-info.mdx". Original error message:

this.data is not a function
error Failed to compile the file "/sandbox/src/pages/chart-info.mdx". Original error message:

this.data is not a function
error Failed to compile the file "/sandbox/content/posts/blog-1.mdx". Original error message:
...

Environment

Codesandbox VM

Config Flags

No flags

[LekoArts]

Hi!

As the README states this wrapper function doesn't work for every plugin, and it won't work for the remark-gfm package. That's why under https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/?=mdx#gfm--esm-only-packages it says that one should install v1 of it. If you do that it'll work :)

[gdams]

@LekoArts is this ever expected to work with Gatsby or will we be permanently stuck on the older version?

[muditjuneja]

+1