queen-raae / gatsby-remark-oembed

A GatsbyJS Plugin that transforms oembed links into its corresponding embed code.
https://gatsby-remark-oembed.netlify.com/
MIT License
162 stars 25 forks source link

<div> cannot appear as a descendent of <p> #102

Open hesamalavi opened 4 years ago

hesamalavi commented 4 years ago

When running gastby-remark-oembed-mdx in local host, I get the following error, and only on the -mdx and not -md: index.js:2177 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. in div (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 pages/index.js:20) in article (at pages/index.js:14) in div (at PageLayout.js:10) in PageLayout (at pages/index.js:11) in BlogMdxIndex (created by HotExportedBlogMdxIndex) in AppContainer (created by HotExportedBlogMdxIndex) in HotExportedBlogMdxIndex (created by PageRenderer) in PageRenderer (at json-store.js:93) in JSONStore (at root.js:51) in RouteHandler (at root.js:73) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by EnsureResources) in ScrollContext (at root.js:64) in RouteUpdates (at root.js:63) in EnsureResources (at root.js:61) in LocationHandler (at root.js:119) in LocationProvider (created by Context.Consumer) in Location (at root.js:118) in Root (at root.js:126) in MDXProvider (at wrap-root-element.js:65) in MDXScopeProvider (at wrap-root-element.js:64) in Unknown in Unknown (at wrap-root-element.js:72) in _default (at app.js:67) __stack_frame_overlay_proxy_console__ @ index.js:2177 index.js:2177 Warning: React does not recognize theallowTransparencyprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseallowtransparencyinstead. If you accidentally passed it from a parent component, remove it from the DOM element. in iframe (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 pages/index.js:20) in article (at pages/index.js:14) in div (at PageLayout.js:10) in PageLayout (at pages/index.js:11) in BlogMdxIndex (created by HotExportedBlogMdxIndex) in AppContainer (created by HotExportedBlogMdxIndex) in HotExportedBlogMdxIndex (created by PageRenderer) in PageRenderer (at json-store.js:93) in JSONStore (at root.js:51) in RouteHandler (at root.js:73) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by EnsureResources) in ScrollContext (at root.js:64) in RouteUpdates (at root.js:63) in EnsureResources (at root.js:61) in LocationHandler (at root.js:119) in LocationProvider (created by Context.Consumer) in Location (at root.js:118) in Root (at root.js:126) in MDXProvider (at wrap-root-element.js:65) in MDXScopeProvider (at wrap-root-element.js:64) in Unknown in Unknown (at wrap-root-element.js:72) in _default (at app.js:67) __stack_frame_overlay_proxy_console__ @ index.js:2177 index.js:2177 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 a (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in blockquote (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 pages/index.js:20) in article (at pages/index.js:14) in div (at PageLayout.js:10) in PageLayout (at pages/index.js:11) in BlogMdxIndex (created by HotExportedBlogMdxIndex) in AppContainer (created by HotExportedBlogMdxIndex) in HotExportedBlogMdxIndex (created by PageRenderer) in PageRenderer (at json-store.js:93) in JSONStore (at root.js:51) in RouteHandler (at root.js:73) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by EnsureResources) in ScrollContext (at root.js:64) in RouteUpdates (at root.js:63) in EnsureResources (at root.js:61) in LocationHandler (at root.js:119) in LocationProvider (created by Context.Consumer) in Location (at root.js:118) in Root (at root.js:126) in MDXProvider (at wrap-root-element.js:65) in MDXScopeProvider (at wrap-root-element.js:64) in Unknown in Unknown (at wrap-root-element.js:72) in _default (at app.js:67) __stack_frame_overlay_proxy_console__ @ index.js:2177 index.js:2177 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 div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in a (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in blockquote (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 pages/index.js:20) in article (at pages/index.js:14) in div (at PageLayout.js:10) in PageLayout (at pages/index.js:11) in BlogMdxIndex (created by HotExportedBlogMdxIndex) in AppContainer (created by HotExportedBlogMdxIndex) in HotExportedBlogMdxIndex (created by PageRenderer) in PageRenderer (at json-store.js:93) in JSONStore (at root.js:51) in RouteHandler (at root.js:73) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by EnsureResources) in ScrollContext (at root.js:64) in RouteUpdates (at root.js:63) in EnsureResources (at root.js:61) in LocationHandler (at root.js:119) in LocationProvider (created by Context.Consumer) in Location (at root.js:118) in Root (at root.js:126) in MDXProvider (at wrap-root-element.js:65) in MDXScopeProvider (at wrap-root-element.js:64) in Unknown in Unknown (at wrap-root-element.js:72) in _default (at app.js:67) __stack_frame_overlay_proxy_console__ @ index.js:2177 index.js:2177 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in a (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in blockquote (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 pages/index.js:20) in article (at pages/index.js:14) in div (at PageLayout.js:10) in PageLayout (at pages/index.js:11) in BlogMdxIndex (created by HotExportedBlogMdxIndex) in AppContainer (created by HotExportedBlogMdxIndex) in HotExportedBlogMdxIndex (created by PageRenderer) in PageRenderer (at json-store.js:93) in JSONStore (at root.js:51) in RouteHandler (at root.js:73) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by EnsureResources) in ScrollContext (at root.js:64) in RouteUpdates (at root.js:63) in EnsureResources (at root.js:61) in LocationHandler (at root.js:119) in LocationProvider (created by Context.Consumer) in Location (at root.js:118) in Root (at root.js:126) in MDXProvider (at wrap-root-element.js:65) in MDXScopeProvider (at wrap-root-element.js:64) in Unknown in Unknown (at wrap-root-element.js:72) in _default (at app.js:67) __stack_frame_overlay_proxy_console__ @ index.js:2177 index.js:2177 Warning: Invalid DOM propertyxmlnsXLink. Did you meanxmlnsXlink`? in svg (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in a (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in blockquote (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 pages/index.js:20) in article (at pages/index.js:14) in div (at PageLayout.js:10) in PageLayout (at pages/index.js:11) in BlogMdxIndex (created by HotExportedBlogMdxIndex) in AppContainer (created by HotExportedBlogMdxIndex) in HotExportedBlogMdxIndex (created by PageRenderer) in PageRenderer (at json-store.js:93) in JSONStore (at root.js:51) in RouteHandler (at root.js:73) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by EnsureResources) in ScrollContext (at root.js:64) in RouteUpdates (at root.js:63) in EnsureResources (at root.js:61) in LocationHandler (at root.js:119) in LocationProvider (created by Context.Consumer) in Location (at root.js:118) in Root (at root.js:126) in MDXProvider (at wrap-root-element.js:65) in MDXScopeProvider (at wrap-root-element.js:64) in Unknown in Unknown (at wrap-root-element.js:72) in _default (at app.js:67) stack_frame_overlay_proxy_console @ index.js:2177 index.js:2177 Warning: validateDOMNesting(...):

cannot appear as a descendant of

. in p (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in blockquote (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 pages/index.js:20) in article (at pages/index.js:14) in div (at PageLayout.js:10) in PageLayout (at pages/index.js:11) in BlogMdxIndex (created by HotExportedBlogMdxIndex) in AppContainer (created by HotExportedBlogMdxIndex) in HotExportedBlogMdxIndex (created by PageRenderer) in PageRenderer (at json-store.js:93) in JSONStore (at root.js:51) in RouteHandler (at root.js:73) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by EnsureResources) in ScrollContext (at root.js:64) in RouteUpdates (at root.js:63) in EnsureResources (at root.js:61) in LocationHandler (at root.js:119) in LocationProvider (created by Context.Consumer) in Location (at root.js:118) in Root (at root.js:126) in MDXProvider (at wrap-root-element.js:65) in MDXScopeProvider (at wrap-root-element.js:64) in Unknown in Unknown (at wrap-root-element.js:72) in _default (at app.js:67) stack_frame_overlay_proxy_console @ index.js:2177 index.js:2177 Warning: validateDOMNesting(...):

cannot appear as a descendant of

. in div (created by MDXCreateElement) in MDXCreateElement (created by MDXContent) in blockquote (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 pages/index.js:20) in article (at pages/index.js:14) in div (at PageLayout.js:10) in PageLayout (at pages/index.js:11) in BlogMdxIndex (created by HotExportedBlogMdxIndex) in AppContainer (created by HotExportedBlogMdxIndex) in HotExportedBlogMdxIndex (created by PageRenderer) in PageRenderer (at json-store.js:93) in JSONStore (at root.js:51) in RouteHandler (at root.js:73) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by EnsureResources) in ScrollContext (at root.js:64) in RouteUpdates (at root.js:63) in EnsureResources (at root.js:61) in LocationHandler (at root.js:119) in LocationProvider (created by Context.Consumer) in Location (at root.js:118) in Root (at root.js:126) in MDXProvider (at wrap-root-element.js:65) in MDXScopeProvider (at wrap-root-element.js:64) in Unknown in Unknown (at wrap-root-element.js:72) in _default (at app.js:67) stack_frame_overlay_proxy_console @ index.js:2177 index.js:2177 Warning: validateDOMNesting(...):

cannot appear as a descendant of

. in blockquote (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 pages/index.js:20) in article (at pages/index.js:14) in div (at PageLayout.js:10) in PageLayout (at pages/index.js:11) in BlogMdxIndex (created by HotExportedBlogMdxIndex) in AppContainer (created by HotExportedBlogMdxIndex) in HotExportedBlogMdxIndex (created by PageRenderer) in PageRenderer (at json-store.js:93) in JSONStore (at root.js:51) in RouteHandler (at root.js:73) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by EnsureResources) in ScrollContext (at root.js:64) in RouteUpdates (at root.js:63) in EnsureResources (at root.js:61) in LocationHandler (at root.js:119) in LocationProvider (created by Context.Consumer) in Location (at root.js:118) in Root (at root.js:126) in MDXProvider (at wrap-root-element.js:65) in MDXScopeProvider (at wrap-root-element.js:64) in Unknown in Unknown (at wrap-root-element.js:72) in _default (at app.js:67) stack_frame_overlay_proxy_console @ index.js:2177 index.js:2177 Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. 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 pages/index.js:20) in article (at pages/index.js:14) in div (at PageLayout.js:10) in PageLayout (at pages/index.js:11) in BlogMdxIndex (created by HotExportedBlogMdxIndex) in AppContainer (created by HotExportedBlogMdxIndex) in HotExportedBlogMdxIndex (created by PageRenderer) in PageRenderer (at json-store.js:93) in JSONStore (at root.js:51) in RouteHandler (at root.js:73) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by EnsureResources) in ScrollContext (at root.js:64) in RouteUpdates (at root.js:63) in EnsureResources (at root.js:61) in LocationHandler (at root.js:119) in LocationProvider (created by Context.Consumer) in Location (at root.js:118) in Root (at root.js:126) in MDXProvider (at wrap-root-element.js:65) in MDXScopeProvider (at wrap-root-element.js:64) in Unknown in Unknown (at wrap-root-element.js:72) in _default (at app.js:67) stack_frame_overlay_proxy_console @ index.js:2177 2browserfs.rollup.js:10783 Uncaught TypeError: Cannot read property 'isReadOnly' of null at browserfs.rollup.js:10783 at Worker. (browserfs.rollup.js:10780) (anonymous) @ util.js:103 (anonymous) @ util.js:103 3editor.main.js:146 Uncaught Error: Cannot read property 'readFile' of undefined

TypeError: Cannot read property 'readFile' of undefined at t.syncFile (tsWorker.js:7) at tsWorker.js:7 at workerMain.js:147 at Array.forEach () at t.acceptRemovedModel (workerMain.js:147) at e._handleMessage (workerMain.js:106) at Object.handleMessage (workerMain.js:106) at e._handleMessage (workerMain.js:104) at e.handleMessage (workerMain.js:103) at e.onmessage (workerMain.js:106) at editor.main.js:146`

nickytonline commented 3 years ago

@hesamalavi, thanks for reporting this. Would you like to work on this issue?

hesamalavi commented 3 years ago

@hesamalavi, thanks for reporting this. Would you like to work on this issue?

Hey @nickytonline , I would love to, I am not that technical though :D, wouldn't even know were to start. And it would be my first open source anything. Any suggestions?

raae commented 2 years ago

I found the issue, we are replacing the link node and not the paragraph node. Therefore the oEmbed html becomes the child of the paragraph.