Twitter embed creates blockquote inside p

[jsjoeio]

• gatsby-remark-embedder version: 3.0.0
• node version: v12.18.3
• npm (or yarn) version: yarn 1.22.4

My gatsby.js config

const config = require('./config/website')
const pathPrefix = config.pathPrefix === '/' ? '' : config.pathPrefix
const { createProxyMiddleware } = require('http-proxy-middleware')

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  developMiddleware: app => {
    app.use(
      '/.netlify/functions/',
      createProxyMiddleware({
        target: 'http://localhost:9000',
        pathRewrite: {
          '/.netlify/functions/': '',
        },
      }),
    )
  },
  pathPrefix: config.pathPrefix,
  siteMetadata: {
    siteUrl: config.siteUrl + pathPrefix,
    title: config.siteTitle,
    titleShort: config.siteTitleShort,
    twitterHandle: config.twitterHandle,
    description: config.siteDescription,
    keywords: ['Video Blogger'],
    canonicalUrl: config.siteUrl,
    image: config.siteLogo,
    author: {
      name: config.author,
      minibio: `
        <strong>Joe Previte</strong> is a full-stack developer and teacher specializing in JavaScript and TypeScript.
      `,
    },
    organization: {
      name: config.organization,
      url: config.siteUrl,
      logo: config.siteLogo,
    },
    social: {
      twitter: config.twitterHandle,
      fbAppID: '',
    },
  },
  plugins: [
    `gatsby-plugin-twitter`,
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/content`,
        name: '',
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: ['.mdx', '.md', '.markdown'],
        gatsbyRemarkPlugins: [
          `gatsby-remark-copy-linked-files`,
          {
            resolve: 'gatsby-remark-images',
            options: {
              backgroundColor: '#fafafa',
              maxWidth: 1035,
            },
          },
          {
            resolve: 'gatsby-remark-autolink-headers',
            options: {
              className: `remark-header-link`,
            },
          },
          {
            resolve: `gatsby-remark-embedder`,
            options: {
              customTransformers: [require(`gatsby-embedder-excalidraw`)],
            },
          },
        ],
      },
    },
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    'gatsby-plugin-emotion',
    'gatsby-plugin-catch-links',
    'gatsby-plugin-react-helmet',
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: config.siteTitle,
        short_name: config.siteTitleShort,
        description: config.siteDescription,
        start_url: config.pathPrefix,
        background_color: config.backgroundColor,
        theme_color: config.themeColor,
        display: 'standalone',
        icons: [
          {
            src: '/android-chrome-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: '/android-chrome-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: `GOOGLE_ID`,
      },
    },
    {
      resolve: `gatsby-plugin-feed`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                title
                description
                siteUrl
                site_url: siteUrl
              }
            }
          }
        `,
        feeds: [
          {
            serialize: ({ query: { site, allMdx } }) => {
              return allMdx.edges.map(edge => {
                return Object.assign({}, edge.node.frontmatter, {
                  description: edge.node.excerpt,
                  date: edge.node.fields.date,
                  url: site.siteMetadata.siteUrl + '/' + edge.node.fields.slug,
                  guid: site.siteMetadata.siteUrl + '/' + edge.node.fields.slug,
                })
              })
            },
            query: `
              {
                allMdx(
                  limit: 1000,
                  filter: { frontmatter: { published: { ne: false } } }
                  sort: { order: DESC, fields: [frontmatter___date] }
                ) {
                  edges {
                    node {
                      excerpt(pruneLength: 250)
                      fields {
                        slug
                        date
                      }
                      frontmatter {
                        title
                      }
                    }
                  }
                }
              }
            `,
            output: '/rss.xml',
            title: 'Blog RSS Feed',
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/lib/typography`,
      },
    },
    'gatsby-plugin-offline',
    'gatsby-plugin-robots-txt',
  ],
}

What you did:

I tried to setup gatsby-remark-embedder with gatsby-plugin-twitter to embed tweets inside my MD/MDX blog posts.

What happened:

Two error messages show up in the console:

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

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

This is the exact same issue as #41.

Reproduction repository: https://github.com/jsjoeio/joeprevite.com/tree/first-product-launch
Link: https://5f5824260894c000076e45df--keen-roentgen-cafcb7.netlify.app/

More than happy to throw it inside a CodeSandbox if that's easier too!

Problem description: invalid DOM nesting

Suggested solution: I'm not sure. My guess is there could be something funky that I'm doing?

[jsjoeio]

I think it's related to the browser but I'm not sure.

Chrome

Works fine. No errors

Firefox

It works if I turn off the "Enhanced Tracking Protection". So weird.

I think this is fine. Closing the issue!

[kentcdodds]

This actually was a real issue, and I'm fixing it :)

[kentcdodds]

Once @MichaelDeBoey gets automated releases working again, then this should be fixed.

[jsjoeio]

Oh wow. Well thanks for commenting on this old issue and issuing a fix! 😄

[kentcdodds]

I bumped into the issue myself and went to fix it. When I was writing the commit, I thought having an issue to link to would help explain what was going on so I searched and found yours. You saved me time writing my own issue 😉 Thank you!

[kentcdodds]

@all-contributors please add @jsjoeio for bugs

[allcontributors]

@kentcdodds

I've put up a pull request to add @jsjoeio! 🎉

[github-actions]

🎉 This issue has been resolved in version 4.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀