Gatsby: `markdownCaptions` with `gatsby-remark-images` with `gatsby-plugin-mdx` doesn't work

[stevetodd]

Description

I'm trying to use markdown in captions on images using the gatsby-plugin-mdx and the gatsby-remark-images by toggling markdownCaptions, but instead of markdown being rendered, I'm getting raw jsx (or something).

Steps to reproduce

See diff from gatsbyjs/gatsby-starter-hello-world here: https://github.com/stevetodd/mdx-remark-images-markedup-captions/commit/2dca93bfcf2a4159fda40813a2ad71f0cc621e72

These are the steps followed in the above repo:

1. gatsby new mdx-remark-images-markedup-captions https://github.com/gatsbyjs/gatsby-starter-hello-world
2. npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react gatsby-source-filesystem gatsby-remark-images gatsby-plugin-sharp
3. Remove src/pages/index.js and create a new file called index.mdx with the following as the contents:

# Hello World!

![The World](world.jpg "This text should be **bold**")

1. Examine the output in a browser

Expected result

We should see the heading, the picture, and a caption below the picture reading "This text should be bold" with bold actually being bold.

Actual result

Instead of the expected text, we see what I presume is jsx. This is the html as shown in inspecting the <figcaption> element and getting its raw inner html:

/* @jsx mdx */


const makeShortcode = name => function MDXDefaultShortcode(props) {
  console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
  return <div>
};

const layoutProps = {

};
const MDXLayout = "wrapper"
export default function MDXContent({
  components,
  ...props
}) {
  return <mdxlayout mdxtype="MDXLayout" components="{components}">
    <p>{`[object Object]`}</p>
    </mdxlayout>;
}

;
MDXContent.isMDXComponent = true;</div>

I suspect that the closing <div> is Chrome trying to make sense of the text.

Environment

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 14.3.0 - ~/.nvm/versions/node/v14.3.0/bin/node
    npm: 6.14.5 - ~/.nvm/versions/node/v14.3.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 83.0.4103.106
    Firefox: 71.0
    Safari: 13.1.1
  npmPackages:
    gatsby: ^2.23.3 => 2.23.3
    gatsby-plugin-mdx: ^1.2.16 => 1.2.16
    gatsby-plugin-sharp: ^2.6.12 => 2.6.12
    gatsby-remark-images: ^3.3.11 => 3.3.11
    gatsby-source-filesystem: ^2.3.12 => 2.3.12
  npmGlobalPackages:
    gatsby-cli: 2.12.47

[laurieontech]

Thanks for the PR, I was able to reproduce this. This is part of a larger issue called out in #25066 where remark plugins, in this case specific features inside of them, run into parsing issues. We're currently looking into how we can better support this interoperability.

[laurieontech]

Thanks again for this issue, I'm going to close it in favor of the umbrella issue and keep it linked for reference.