Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
hesamalavi opened this issue May 14, 2020 · 3 comments
Open

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

hesamalavi opened this issue May 14, 2020 · 3 comments
Labels
bug Something isn't working

Comments

@hesamalavi
Copy link

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 the allowTransparencyprop 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 mean xmlnsXlink`?
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 nickytonline added the bug Something isn't working label Nov 2, 2020
@nickytonline
Copy link
Collaborator

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

@hesamalavi
Copy link
Author

@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
Copy link
Member

raae commented Apr 26, 2022

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.

@raae raae mentioned this issue Apr 28, 2022
Merged
raae added a commit that referenced this issue Jul 20, 2022
@raae
fix: transform paragraph parent node for standalone link nodes (#170)
193547e 
Solves #102
raae-bot pushed a commit that referenced this issue Jul 20, 2022
@semantic-release-bot
chore(release): 0.3.2 [skip ci]
60bdc13 
## [0.3.2](v0.3.1...v0.3.2) (2022-07-20)

### Bug Fixes

* transform paragraph parent node for standalone link nodes ([#170](#170)) ([193547e](193547e)), closes [#102](#102)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@raae @nickytonline @hesamalavi