Error: img is a void element tag and must neither have children nor use dangerouslySetInnerHTML

[poacher2k]

Hi!

Great plugin, really think this is going to be helpful for what I'm working on.

I noticed that parsing any img-element causes the above error. This may also apply to any element that never should have child elements.

A temporary workaround is to use something like this:

const parserConfig = {
    replace: domNode => {
        if(domNode.type === DOM_TYPE_TAG && domNode.name === 'img') {
            return <img src={domNode.attribs.src} alt={domNode.attribs.alt} className={domNode.attribs.class} />;
        }
    }
};

[remarkablemark]

Thanks for letting me know. Do you have an example so I can reproduce this error?

[poacher2k]

Hi!
You can reproduce this with the following:
ReactDOM.render(Parser('<div><img src="" alt=""/></div>'), document.getElementById('root'));

[poacher2k]

Awesome, thank you!

[remarkablemark]

@poacher2k Thanks for the example. I've looked into the bug and made a fix in #16.

Try npm update html-react-parser or npm install [email protected] and let me know if this removes the error for you.

[poacher2k]

That fixed it, thanks again! Glad to see you also added checks for other void elements!

[remarkablemark]

Great to hear and you're very welcome! 👍

[vidit1]

@remarkablemark I am still facing the issue and npm install [email protected] code is not updated in this version.

[remarkablemark]

@vidit1 Can you confirm that you installed the latest version?

npm i html-react-parser@latest

# or
npm i [email protected]

Then verify by doing:

npm ls html-react-parser

[blueskysmart]

@remarkablemark I updated the latest version html-react-parser and still face this issue. My element is inside a material-ui component.
<Drawer> <div className="alert" role="alert"> <img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" className="d-inline-block align-top" alt=""> Bootstrap </img> </div> </Drawer>

[poacher2k]

@blueskysmart : You have the text "Bootstrap" inside your img-tag. As the error says, img is a void element, and cannot have any children.

See @remarkablemark 's comment below for guidance on how to fix it.

[remarkablemark]

@blueskysmart The comment made by @poacher2k is correct. You can see the reproduction of this error in this fiddle.

[blueskysmart]

Okie, I see. Thank you.

[cipiripper]

This error comes up also if you only try to parse this:
<img src="img.jpg".>

To make it work, wrap it in a div:

<div>
<img src="img.jpg".>
</div>

[Sshetty2]

I was running into this issue because I was trying to add children to an img tag...