Remark doesn't work with gatsby-plugin-mdx

[alaaalii]

Hey! I'm trying to use this plugin in my Gatsby site. I use gatsby-plugin-mdx to process md (and mdx) files instead of the standard gatsby-transformer-remark plugin. gatsby-plugin-mdx provides an option to pass it remark plugins (https://www.gatsbyjs.org/packages/gatsby-plugin-mdx/#gatsby-remark-plugins) in a gatsbyRemarkPlugins option like this:

    {
      resolve: "gatsby-plugin-mdx",
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: "gatsby-remark-grid-tables",
          },
        ],
      },
    },

But it doesn't seem to work with this gatsby-remark-grid-tables plugin - tables are not extended with the additional functionality.

[hennessyevan]

Hmmm... I've never used mdx with Gatsby actually. Could you set up a repro so we could take a look?

This package is extremely simple but it's possible there is some other way to expose the remark plugin to Gatsby to have it work properly with mdx.

[alaaalii]

I actually did get it to work with mdx by passing the actual remark-grid-tables plugin in the mdx remarkPlugins option:

    {
      resolve: "gatsby-plugin-mdx",
      options: {
        remarkPlugins: [require("remark-grid-tables")],
      },
    },

But I'm actually using a theme that abstracts the options to the mdx plugin and unfortunately they don't expose this remarkPlugins option - only the gatsbyRemarkPlugins option, so it would be great if this could work with gatsbyRemarkPlugins. From their documentation (https://www.gatsbyjs.org/docs/mdx/plugins/) it says:

gatsby-plugin-mdx is compatible with all of the gatsby-remark plugins, including gatsby-remark-images.

So I assume it should work :)?

I've set up a repo here: https://github.com/alaaalii/my-test-gatsby-site

[hennessyevan]

Thanks. I'll give this a look

[hennessyevan]

It looks like this isn't a problem with this particular plugin but rather with the way gastby-plugin-mdx is resolving its plugins.

There are a number of upstream issues that I found about this. but the main one being this https://github.com/gatsbyjs/gatsby/issues/21950#issuecomment-595068568

I tried to get gatsby-remark-katex working. The behavior is the same as for this gatsby-remark-grid-tables plugin

I'd track these issues: https://github.com/gatsbyjs/gatsby/issues/23194 https://github.com/gatsbyjs/gatsby/issues/21950 https://github.com/gatsbyjs/gatsby/issues/21866 https://github.com/gatsbyjs/gatsby/issues/16983

[cainmagi]

To my understanding, using a simple wrapper like this project may cause problems because markdown and x-markdown files are not totally the same. For example, remark-grid-tables is designed for parsing markdown files, which are compatible with HTML codes. However, if it is migrated to x-markdown, since the generated results are treated as React components instead of the HTML elements, some of the keywords may not be compatible with React. For example, if the following elements are treated as React components,

<table>
...
<tr colspan='2'>...</tr>
...
</table>

The colspan will be regarded as an invalid keyword, and the following warning will be thrown

Warning: Invalid DOM property `colspan`. Did you mean `colSpan`?

I think the author should try to fix this problem. Although the page is not broken, these warnings are very annoying.

[hennessyevan]

PRs are welcome!