Gatsby: Using gatsby-plugin-mdx with gatsby-remark-images and gatsby-remark-autolink-headers doesn't work

[KyeMaloy97]

Description

I have read the issue described in #15486 but I seem to have a slightly different use case, and can't get the workaround to work for myself. Basically, the site has switched from MD to MDX, but when I use the workaround of renaming gatsbyRemarkPlugins as just plugins, the autolink headers vanish and don't appear when you hover on a title and images do not load at all.

If I leave the plugins section named as gatsbyRemarkPlugins, images load twice, once blurry and once properly and the auto link icons show permanently next to headers, and scroll incorrectly when you click them.

The image below shows what happens when the gatsby-config is written like this:

{
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        // CommonMark mode (default: true)
        commonmark: true,
        // Footnotes mode (default: true)
        footnotes: true,
        // Pedantic mode (default: true)
        pedantic: false,
        // GitHub Flavored Markdown mode (default: true)
        gfm: true,
        // Plugins configs
        // plugins: [`gatsby-remark-images`, `gatsby-remark-autolink-headers`],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-autolink-headers`,
            options: {
              className: `header-link-icon`
            }
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              linkImagesToOriginal: true,
              maxWidth: 1000,
              wrapperStyle: result => `width: 100%;margin-left: 0;`,

            }
          }
        ],
      }
    },

If I change the code to rename gatsbyRemarkPlugins to plugins, as described in a few issues as a workaround, I get the following view (with header links not showing at all, even on hover):

Steps to reproduce

Here is a hello world starter example I have made with the same issue: https://github.com/KyeMaloy97/gatsby-bug-demo

The images double load and the links show all the time.

Expected result

Images load properly and the auto link headers appear on hover and don't misalign the headers by messing with the margins.

Actual result

Headers don't work as expected and images load twice. Or images don't load and header links don't work either.

Environment

System:
OS: macOS 10.15.1
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.10.0 - /usr/local/bin/node
Yarn: 1.19.0 - /usr/local/bin/yarn
npm: 6.12.0 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /Users/kyemaloy/.pyenv/shims/python
Browsers:
Chrome: 78.0.3904.108
Firefox: 70.0
Safari: 13.0.3
npmPackages:
gatsby: ^2.9.6 => 2.9.6
gatsby-plugin-google-analytics: ^2.1.0 => 2.1.0
gatsby-plugin-manifest: ^2.2.0 => 2.2.0
gatsby-plugin-mdx: ^1.0.58 => 1.0.58
gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0
gatsby-plugin-sharp: ^2.2.31 => 2.2.31
gatsby-remark-autolink-headers: ^2.1.10 => 2.1.10
gatsby-remark-images: ^3.1.28 => 3.1.28
gatsby-source-filesystem: ^2.1.0 => 2.1.0
gatsby-transformer-yaml: ^2.2.4 => 2.2.4
npmGlobalPackages:
gatsby-cli: 2.7.47

[ddunn2]

@KyeMaloy97 This seems to work when you update your gatsby-config.js to the following:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        // CommonMark mode (default: true)
        commonmark: true,
        // Footnotes mode (default: true)
        footnotes: true,
        // Pedantic mode (default: true)
        pedantic: false,
        // GitHub Flavored Markdown mode (default: true)
        gfm: true,
        // Plugins configs
        // plugins: [`gatsby-remark-images`, `gatsby-remark-autolink-headers`],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-autolink-headers`,
            options: {
              className: `header-link-icon`
            }
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              linkImagesToOriginal: true,
              maxWidth: 1000,
              wrapperStyle: result => `width: 100%;margin-left: 0;`,


            }
          }
        ],
      }
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-autolink-headers`,
            options: {
              className: `header-link-icon`
            }
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              linkImagesToOriginal: true,
              maxWidth: 1000,
              wrapperStyle: result => `width: 100%;margin-left: 0;`,
            }
          }
        ],
      },
    },
    `gatsby-plugin-sharp`,
  ],
}

I'm not entirely sure as to why you need to specify config for gatsby-transformer-remark as well as gatsby-plugin-mdx but hopefully someone can shed some light on this for us :)

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[peter-reonomy]

@ddunn2 thank you! I too am confused about the need to config twice. It also seems that some options (like offsetY) must be under gatsby-transformer-remark whereas others (like isIconAfterHeader) must be under gatsby-plugin-mdx. From my gatsby-config.js:
{ resolve: `gatsby-transformer-remark`, options: { plugins: [ { resolve: `gatsby-remark-autolink-headers`, options: { offsetY: `100`, icon: `<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>` }, }, ], }, }, { resolve: 'gatsby-plugin-mdx', options: { gatsbyRemarkPlugins: [ { resolve: `gatsby-remark-autolink-headers`, options: { className: `header-link-icon`, maintainCase: false, removeAccents: true, isIconAfterHeader: true, } } ] } },

[kamranayub]

Just ran into this. I am almost positive it is because some options are used in the gatsby-*.js files in the plugin but these are not executed when it is a "sub-plugin" (at least with gatsby-plugin-mdx). I know this because I made a custom gatsby-remark plugin and tried adding under gatsbyRemarkPlugins and my onPreInit method was never called in the plugin while loading, so for whatever reason the plugin lifecycle isn't respected when under gatsbyRemarkPlugins.

The style tag that is generated happens in gatsby-ssr.js in the autolink plugin but since MDX plugin doesn't execute that file, it never happens:

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-autolink-headers/src/gatsby-ssr.js

I think that's a bug but I'm not sure, it was definitely unexpected.

[tony]

@kamranayub Good observation!

Judging from the gatsby-plug-mdx documentation I think having to duplicate the config feels like a bug, or something that should be clarified in docs at least

[tony]

Potentially related:

https://github.com/ChristopherBiscardi/gatsby-mdx/issues/204

I'm still not getting the link to show on my end, even with the mentionings here. It may be worth making a new issue, because this is still an issue