Skip to content

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

@pelikhan

Description

@pelikhan

Preliminary Checks

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);
    };
  };
  1. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions