Self-closing HTML tags are not always working

[rolandleth]

Hey!

The issue reproduces with almost any self-closing tag like input or area, but br seems to have no issues.

If I try to parse just this

<img src="/images/someImage.jpg" />

I get an error thrown:

Invariant Violation: img is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

Something more complex, like a blog post that contains several img tags gets me:

Weirdly enough, a blog post that contains a single img properly works ...

This is an example that is giving me troubles: https://gist.github.com/rolandleth/b182260ba423c3e65923fe382e000c9e

I tried lurking for a few hours, but I don't have the experience to actually debug it. I thought I found some solutions, but nothing properly worked. For example React does this check: !(props.children == null && props.dangerouslySetInnerHTML == null), but the passed in children is an empty array for the img tag; but not always 😑. It's clear I have no real idea what I'm doing.

Would you have time to test the library with the example I provided?

I'm using

<ReactMarkdown
    source={this.state.post.body}
    escapeHtml={false}
/>

but I also tried custom parsers, like in the docs, with astPlugins={[parseHtml]}. Although it might just be that I didn't know how to configure them 😞

Let me know if and how I can help.

Thanks and have a great day! 🌞

[davidyeiser]

I'm getting this same error for an <img src="…" />.

Tested with this code (react-markdown v.4.0.6):

import React from 'react'
import ReactMarkdown from 'react-markdown/with-html'

const markdown = `<img src="https://www.fillmurray.com/200/300" />`

const Markdown = () => (
  <ReactMarkdown
    source={markdown}
    escapeHtml={false}
  />
)

export default Markdown

I found this on another project, not sure if it would be a similar fix here:
remarkablemark/html-react-parser#16

I looked through lib/plugins/html-parser.js but nothing jumped out at me…

[davidyeiser]

FYI for anyone who may come across this, you can use a non-self-closing img tag and it works fine.

e.g. <img src="images/image.png" alt="Image">

[rolandleth]

Sadly that doesn't work for me, either 😞

[mssngr]

I have the same issue. img tags just don't seem to work with react-markdown.

[nvenegas]

Invariant Violation: img is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

I tracked this down to the manner in which React.createElement and React.cloneElement are called in react-markdown/lib/html-parser and html-to-react (which the former delegates to):

React 16.4.1 senses whether children have been passed via arguments.length:

  // Children can be more than one argument, and those are transferred onto
  // the newly allocated props object.
  var childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = …;
  } else if (childrenLength > 1) {
    …
    props.children = …;
  }

react-markdown/lib/html-parser and html-to-react assume they can pass undefined as the children argument and not have it trigger the above behaviour, so, e.g., this from react-markdown/lib/renderers.js would trip it:

function VirtualHtml(props) {
  return createElement(props.tag, getCoreProps(props), props.children);
}

whereas this would avoid it

function VirtualHtml(props) {
  return props.children
    ? createElement(props.tag, getCoreProps(props), props.children)
    : createElement(props.tag, getCoreProps(props));
}

I have local changes that fix this (and see my next comment, below) and need to clean them up and seek some guidance from @rexxars to create PRs

[nvenegas]

Something more complex, like a blog post that contains several img tags gets me:

TypeError: undefined is not an object (evaluating fromNode.node.position.start)

I think I've tracked this down to what seems to be inverted logic for processing opening tags in the parseHtml() function in react-markdown/lib/plugins/html-parser:

    if (matching) {
      parent.children.splice(index, 0, parsedHtml(current, matching, parent));
    } else if (!current.opening) {
      open.push(current);
    }

I believe the 3rd line should not have a ! in front of current.opening.

With the current behaviour, the error comes about for void element tags like <img> in that it is incorrectly being treated as an opening tag and when the HTML parser tries to replace the open tag + children + closing tag it breaks.

[ChristianMurphy]

Trying the sample from the original message

<img src="/images/someImage.jpg" />

in the playground https://remarkjs.github.io/react-markdown
it parses as expected

[red1]

@ChristianMurphy the issue is still not fixed for other html self closing tags.
Example
add in the playground

you'll see the div is not respected and the whole rest of the content is injected inside the div

[ChristianMurphy]

@red1 <div> isn't a self closing tag.
Please see this example from the HTML spec which explains further. https://html.spec.whatwg.org/multipage/parsing.html#parse-error-non-void-html-element-start-tag-with-trailing-solidus
And also see the following sandbox which shows the same behavior in plain HTML https://jsfiddle.net/yLb2zf7c/

HTML in Markdown, is still HTML and will follow HTML rules.

If folks have further questions feel free to reach out in a Q&A discussion https://github.com/orgs/remarkjs/discussions