3

I'm using the following versions:

"gatsby": "^4.21.1",
"gatsby-plugin-mdx": "^4.0.0",
"gatsby-remark-images": "^6.21.0",
"remark-unwrap-images": "^3.0.1",

And I have the following in place as part of my gatsby-config.js:

    {
        resolve: "gatsby-plugin-mdx",
        options: {
            gatsbyRemarkPlugins: [
                {
                    resolve: "gatsby-remark-images",
                    options: {
                        linkImagesToOriginal: false,
                        backgroundColor: "transparent",
                    },
                },
            ],
            mdxOptions: {
                remarkPlugins: [wrapESMPlugin("remark-unwrap-images")]
            }
        },
    },

Then in my code I make use of the MDXProvider to override the rendering of some components like so:

        <MDXProvider components={{ img: SomeComponent }}>
            {children}
        </MDXProvider>

Before upgrading to use the latest versions of gatsby-plugin-mdx and gatsby-remark-images this used to work nicely and I'd end up with my custom component being rendered correctly.

Since the update I'm finding that an extra div is wrapping the image which appears to be coming from gatsby-remark-images (although looking at the source code I can't see how or where).

As a result, this changes the behaviour of MDXProvider since it now thinks it's a div instead of an img which is a problem.

Has anyone encountered this or have a suggestion on how to resolve it?

Note: This is not the same as the issue with images getting wrapped in p Which can be resolved by using remark-unwrap-images per my gatsby-config.js as shown above. Also, further to this gatsby-remark-figure-caption does not appear to work in gatsby 4+.

MrPinguino
  • 61
  • 5
  • check this plugin : [gatsby-remark-unwrap-images](https://www.gatsbyjs.com/plugins/gatsby-remark-unwrap-images/) , check this as well : https://stackoverflow.com/questions/68957098/how-do-i-stop-gatsby-from-wrapping-markdown-images-in-p-tags-and-hiding-image – debugger Sep 17 '22 at 08:50
  • seems like someone else encountered this. but this isn't considered as a bug. check this: https://github.com/gatsbyjs/gatsby/issues/37049 – Marc Simon Dec 14 '22 at 18:52

0 Answers0