gatsby: [gatsby-plugin-mdx] Images within

nested within

tags are invalid

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.

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>.

Be careful, everything might appear to be working, however when running the production build and reloading a page where this error is thrown, a bunch of other elements are blown by this. When navigating away and back, all looks good so this only triggers on first load / forced reload.

Using the unwrap plugin, you can actually enable the image captions and everything works fine. I followed this approach: https://github.com/gatsbyjs/gatsby/issues/24832#issuecomment-642649433

On the issue with the video component, I have now resorted to write my own wrapper component, which bypasses all the markdown nesting issues and allows better control of the settings (like using nocookie). There is a lovely samplecode at https://www.gatsbyjs.com/docs/how-to/images-and-media/working-with-video/

Running into a similar issue with gatsby-remark-embed-gist and gatsby-plugin-mdx

Using the config https://github.com/weirdpattern/gatsby-remark-embed-gist/issues/12 gives these errors:

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

The tag <undefined> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

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.

Issue with embedding video that gives <div> cannot appear as a descendant of <p>

Here are the current dependency line up I used to reproduce this issue:

    "@mdx-js/mdx": "1.6.5",
    "@mdx-js/react": "1.6.5",
    "gatsby": "2.23.3",
    "gatsby-plugin-mdx": "1.2.15",
    "gatsby-remark-images": "3.3.10",
    "remark-unwrap-images": "2.0.0",

I can also verify there is an issue @onadeem1 pointed out when MDX wraps HTML markup tags coming from gatsby-remark-embed-video with gatsby-remark-responsive-iframe. The resulting HTML becomes

<p>
  <undefined>
      <div class="gatsby-resp-iframe-wrapper" style="...">
          <div class="embedVideo-container">
              <iframe src="..." class="embedVideo-iframe" allowfullscreen="" style="...">...</iframe>
          </div>
      </div>
  </undefined>
</p>

along with the following error on the console

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
    in div (created by MDXCreateElement)
    in MDXCreateElement (created by MDXContent)
    in div (created by MDXCreateElement)
    in MDXCreateElement (created by MDXContent)
    in undefined (created by MDXCreateElement)
    in MDXCreateElement (created by MDXContent)
    in p (created by MDXCreateElement)
    in MDXCreateElement (created by MDXContent)
    in wrapper (created by MDXCreateElement)
    in MDXCreateElement (created by MDXContent)
    in MDXContent (created by MDXRenderer)
    in MDXRenderer (at Bodytext.js:20)
    ...

What should have been rendered?

If I were to use the regular .md markup with gatsby-transformer-remark without MDX support, the HTML markup does not wrap <div> within <p>

<div class="gatsby-resp-iframe-wrapper" style="...">
  <div class="embedVideo-container">
    <iframe src="..." class="embedVideo-iframe" allowfullscreen="" style="...">...</iframe>
  </div>
</div>

Workaround with remark-unwrap-images does not solve the markup wrapping issue from embedded video

Tried adding remark-unwrap-images as suggested by @muuvmuuv which workaround the issue Images within <figure> nested within <p> tags are invalid by unwrapping image from gatsby-remark-images. However, it does not help with the issue from gatsby-remark-embed-video as pointed out above.

Curious if remark-unwrap-images could be extended to help solve the issue with embedded video? Perhaps the official solution should really be coming out from gatsby-plugin-mdx without the need for these workarounds. Would love to help, but not sure where to start, any pointers would be grateful!

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?

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.