Twitter embed creates blockquote inside p
Closed this issue · 8 comments
gatsby-remark-embedderversion: 3.0.0nodeversion: v12.18.3npm(oryarn) 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?
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!
This actually was a real issue, and I'm fixing it :)
Once @MichaelDeBoey gets automated releases working again, then this should be fixed.
Oh wow. Well thanks for commenting on this old issue and issuing a fix! 😄
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!
@all-contributors please add @jsjoeio for bugs
I've put up a pull request to add @jsjoeio! 🎉
🎉 This issue has been resolved in version 4.2.0 🎉
The release is available on:
Your semantic-release bot 📦🚀