[gatsby-plugin-mdx]: Double images / blurry / wrong style

[rwieruch]

I am using gatsby-remark-images in my Gatsby MDX powered website. Not sure whether this was introduced during the last months, because it worked before, but after upgrading everything I have to set the following style manually to override the responsive Gatsby style to make it work in my markdown.

  .gatsby-resp-image-background-image {
    display: none !important;
  }

Otherwise I will have a large white space before my image gets rendered.

My images are used with the normal format in my markdown: ![my image alt](./images/my-image.jpg)

---

Dependencies:

  "dependencies": {
    "@mdx-js/mdx": "^1.0.21",
    "@mdx-js/react": "^1.0.21",
    "axios": "^0.19.0",
    "disqus-react": "^1.0.6",
    "dotenv": "^8.0.0",
    "gatsby": "^2.13.6",
    "gatsby-image": "^2.2.4",
    "gatsby-link": "^2.2.0",
    "gatsby-mdx": "^0.6.3",
    "gatsby-plugin-catch-links": "^2.1.0",
    "gatsby-plugin-feed": "^2.3.2",
    "gatsby-plugin-google-analytics": "^2.1.1",
    "gatsby-plugin-manifest": "^2.2.1",
    "gatsby-plugin-offline": "^2.2.1",
    "gatsby-plugin-react-helmet": "^3.1.0",
    "gatsby-plugin-sentry": "^1.0.1",
    "gatsby-plugin-sharp": "^2.2.3",
    "gatsby-plugin-sitemap": "^2.2.1",
    "gatsby-plugin-styled-components": "^3.1.0",
    "gatsby-remark-autolink-headers": "^2.1.0",
    "gatsby-remark-copy-linked-files": "^2.1.0",
    "gatsby-remark-images": "^3.1.3",
    "gatsby-source-filesystem": "^2.1.2",
    "gatsby-transformer-remark": "^2.6.1",
    "gatsby-transformer-sharp": "^2.2.1",
    "prism-react-renderer": "^0.1.7",
    "prismjs": "^1.16.0",
    "react": "next",
    "react-dom": "next",
    "react-facebook-pixel": "^0.1.3",
    "react-helmet": "~5.2.1",
    "react-quora-pixel": "0.0.5",
    "react-twitter-conversion-tracker": "^1.0.0",
    "react-youtube": "^7.9.0",
    "styled-components": "^4.3.2"
  },

[rwieruch]

Also I need to set

  .gatsby-resp-image-image {
    max-width: 100% !important;
  }

to not overflow the image to the right (see screenshot from first comment). But that's what I had already to do before. So no change here.

[cwgw]

I'm seeing similar layout problems in my own site. Also using gatsby-mdx and gatsby-remark-images.

I think the problem is the inline style attribute on the img element (.gatsby-resp-image-image). It's gone now.

Looks like some hard-coded inline styles were removed by c4a7c40. See here.

I'm not sure if this was intended or not. @JoshuaWalsh @wardpeet could you chime in? Should we now be adding these styles ourselves or is something going wrong here?

[cwgw]

@rwieruch if you add the styles back, I think things will look they way they did before.

.gatsby-resp-image-image {
  width: 100%;
  height: 100%;
  margin: 0;
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
}

The problem isn't with .gatsby-resp-image-background-image, it's that the img after it should be absolutely positioned and it no longer is.

[cwgw]

Looking at c4a7c40 more carefully, it looks like gatsby-remark-images is supposed to add the .gatsby-resp-image-image styles back in via a style tag in the head.

This doesn't seem to be happening for me in development or production. Could the problem be a conflict with gatsby-plugin-mdx?

[YoshiWalsh]

it looks like gatsby-remark-images is supposed to add the .gatsby-resp-image-image styles back in via a style tag in the head

Yep, it's supposed to. The commit message mentions the rationale. I'm sorry to hear this isn't working for you, I will try to help find a resolution.

Could the problem be a conflict with gatsby-plugin-mdx?

Possibly, I haven't used gatsby-plugin-mdx myself. I had a quick look and it doesn't seem to use the replaceRenderer API, so I'm not sure why the head component I added wouldn't be rendered.

Is there a starter or public repository that reproduces the problem?

[cwgw]

Thank you for your help. I'll try to isolate the issue with a repo.

[chasemccoy]

I can confirm that this happens to my site when updating gatsby-remark-images from 3.1.2 to 3.1.3.

[cwgw]

Okay, I've tracked it down. Here's a repo.

I think this is a problem with gatsby-plugin-mdx, not gatsby-remark-images, and c4a7c40 just made it visible.

My guess is that gatsby-plugin-mdx isn't properly loading/running the gatsby api calls made by gatsby-remark-images.

If you configure both gatsby-plugin-mdx and gatsby-transformer-remark to use gatsby-remark-images as a plugin, then everything works as expected.

    ...
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [ `gatsby-remark-images` ],
      }
    },
    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        gatsbyRemarkPlugins: [ `gatsby-remark-images` ],
      }
    },

If you don't use gatsby-remark-images as a gatsby-transformer-remark plugin, or don't use gatsby-transformer-remark at all, then we see our issue.

    ...
    {
      resolve: `gatsby-transformer-remark`,
      // options: {
      //   plugins: [ `gatsby-remark-images` ],
      // }
    },
    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        gatsbyRemarkPlugins: [ `gatsby-remark-images` ],
      }
    },

[vpicone]

@ChristopherBiscardi do you think could be related to gatsby-plugin-mdx? It’s happening in our theme when we try and upgrade plugins as well.

[spences10]

I'm having this issue too but run my transformer plugins through gatsbyRemarkPlugins and don't use transformer remark.

Closed #15541 in favour of this.

[cwgw]

So digging a little deeper, it looks like Gatsby only looks for "subplugins" at one specific path, options.plugins.

gatsby-plugin-mdx uses options.gatsbyRemarkPlugins. This is fine for transforming markdown as the plugin handles that itself, but Gatsby-specific api files like gatsby-browser.js don't get loaded because Gatsby doesn't know they exist.

If you try this…

    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        gatsbyRemarkPlugins: [ `gatsby-remark-images` ],
        plugins: [ `gatsby-remark-images` ],
      }
    },

…everything works as it should.

[SilverFox70]

I am experiencing this same issue. Is the only solution to us cwgw's snippet?

[cwgw]

I think the solution is to ensure that gatsby-plugin-mdx is loading plugins properly. However, there's a lot going on in the plugin and much of it is over my head.

@ChristopherBiscardi, am I understanding the problem correctly? Is it reasonable to just rename gatsbyRemarkPlugins as plugins?