[gatsby-plugin-mdx] Images within <figure> nested within <p> tags are invalid

[chasemccoy]

Description

When using gatsby-plugin-mdx with gatsby-remark-images, images written in Markdown are being wrapped in a <p> tag, which fails React's DOM nesting validation because elements like <figure> and <figcaption> (which area generated by gatsby-remark-images) are not valid with <p> tags.

Steps to reproduce

Render a Markdown image:

![Alt text](image.png)

In a Gatsby site using gatsby-plugin-mdx and gatsby-remark-images.

Expected result

The image would not be nested within a paragraph tag.

Actual result

The image is nested within a <p> tag, which caused DOM validation to fail:

Environment

  System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
    Yarn: 1.16.0 - ~/.yarn/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.15.1/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 64.0
    Safari: 12.1.1
  npmPackages:
    gatsby: 2.8.6 => 2.8.6 
    gatsby-image: 2.1.2 => 2.1.2 
    gatsby-plugin-favicon: 3.1.6 => 3.1.6 
    gatsby-plugin-feed: 2.2.3 => 2.2.3 
    gatsby-plugin-layout: 1.0.15 => 1.0.15 
    gatsby-plugin-mdx: ^1.0.7 => 1.0.7 
    gatsby-plugin-page-creator: 2.0.13 => 2.0.13 
    gatsby-plugin-react-helmet: 3.0.12 => 3.0.12 
    gatsby-plugin-sharp: 2.1.3 => 2.1.3 
    gatsby-plugin-styled-components: 3.0.7 => 3.0.7 
    gatsby-plugin-twitter: 2.0.13 => 2.0.13 
    gatsby-remark-autolink-headers: 2.0.16 => 2.0.16 
    gatsby-remark-copy-linked-files: ^2.1.3 => 2.1.3 
    gatsby-remark-external-links: 0.0.4 => 0.0.4 
    gatsby-remark-images: 3.1.2 => 3.1.2 
    gatsby-source-airtable: 2.0.8 => 2.0.8 
    gatsby-source-filesystem: 2.0.38 => 2.0.38 
    gatsby-source-github: ^0.0.2 => 0.0.2 
    gatsby-source-wordpress: 3.0.64 => 3.0.64 
    gatsby-transformer-hjson: 2.1.8 => 2.1.8 
    gatsby-transformer-json: 2.1.11 => 2.1.11 
    gatsby-transformer-remark: 2.3.12 => 2.3.12 
    gatsby-transformer-sharp: 2.1.21 => 2.1.21 
  npmGlobalPackages:
    gatsby-cli: 2.6.5

[chasemccoy]

cc @ChristopherBiscardi @johno

[chasemccoy]

This might require making sure that gatsby-remark-images is configured to show captions under images.

[RobertBroersma]

I'm also experiencing this issue. Only when writing an alt text in Markdown like so:

![Alt text](image.png)

It seems like it doesn't matter if I configure showCaptions or markdownCaptions in my config, the alt text shows up anyway if it exists. But I suppose that is a separate issue!

[rejas]

I just stumbled over this too.

In my gatsby config i use the mdx plugin together with the remarkplugin like this:

    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        defaultLayouts: {
          default: require.resolve(
            `${__dirname}/src/components/page/Layout.jsx`
          ),
        },
        extensions: ['.mdx', '.md'],
        gatsbyRemarkPlugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              linkImagesToOriginal: false,
              showCaptions: true,
              withWebp: true,
            },
          },
        ],
        plugins: ['gatsby-remark-images'],
      },
    },

and my images are rendered with this error in the console:

Warning: validateDOMNesting(...): <figure> cannot appear as a descendant of <p>.
    in figure (created by MDXCreateElement)

It renders but the error is of course annoying, is there anything I can do to get this fixed?

[muuvmuuv]

Maybe related to this? #15486
I think the issue is with the plugin handling itself as discussed in the above issue. Hopefully a fix will come soon!

[onadeem1]

I am having this same issue but with the gatsby embed video or gatsby responsive iframe, one of them creates a <div> which goes inside the <p> tag for markdown. Any updates? Thanks. Can add more info if needed but essentially the same problem.

[muuvmuuv]

Found a workaround for the image issue, just add remark-unwrap-images:

const mdxImageWrapFix = {
  resolve: `gatsby-plugin-mdx`,
  options: {
    plugins: [`gatsby-remark-images`],
    remarkPlugins: [require('remark-unwrap-images')],
    gatsbyRemarkPlugins: [
      'gatsby-remark-images',
    ],
  },
},

I guess it should be easy to adapt this plugin to embedded video and others as well.

[mmgolden]

Is there an official fix coming for this yet? I have the same problem.

{
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 756,
              showCaptions: true,
              quality: 80,
            },
          },
        ],
      },
    },

Warning: validateDOMNesting(...): <figure> cannot appear as a descendant of <p>.