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 html-react-parser@0.0.4 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 html-react-parser@0.0.4 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 html-react-parser@0.4.1

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.