SVG paring fails with an embedded script tag about html-react-parser HOT 10 CLOSED

Also I have noticed that contentScriptType and contentStyleType in the SVG tag are being replaced with lower case version which results in this warning in the browser:

index.js:2178 Warning: Invalid DOM property contentscripttype. Did you mean contentScriptType?
in svg (created by Coach)
in div (created by Paper)
in Paper (created by WithStyles(Paper))
in WithStyles(Paper) (at coach.js:148)
in Coach (created by WithStyles(Coach))
in WithStyles(Coach) (created by Route)
in Route (at App.js:109)
in div (at App.js:80)
in div (at App.js:63)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:61)
in App (at src/index.js:7)

from html-react-parser.

Looking a little deeper I am pretty sure that (var x=0;x<ids.length;x++) is causing the problem. It looks like the parser is dying when its hits the <

Since the script tag's content is in a CDATA element, it should not have a problem with this.

I've also tried react-render-html which has the exact same problem, so my assumption is that the problem is in one of the dependencies.

from html-react-parser.

@ianbale Can you help me reproduce the error you're seeing with JSFiddle or CodeSandbox?

from html-react-parser.

I was able to reproduce the issue. To fix the errors, I had to do 2 things:

1. Remove CDATAin the markup as that's the cause of the unexpected end of input error
2. Change '</script>' to '</scr' + 'ipt> to resolve unterminated string constant error

The invalid DOM property warnings are still there (expected since the parser lowercases attributes that aren't part of the react-dom whitelist. (The warning, although annoying, is fine since the svg should still render.)

See fiddle.

from html-react-parser.

Since the script is essential, rendering without it is not really an option, neither is changing the input SVG.

Surely the parser should handle CDATA since it's a perfectly valid within the XML?

For now I'm just using dangerouslySetInnerHTML which works perfectly. Since it's a private app with trusted SVG data that is not a problem for me.

from html-react-parser.

Gotcha. Technically, the parser should handle the CDATA but it seems like it didn't in my example. I think using dangerouslySetInnerHTML should be fine in your use case.

If the issue is resolved on your end, do you mind closing it?

from html-react-parser.

I could... but having decided to use dangerouslySetInnerHTML before I even reported the issue to you, the whole point of doing so was to give you the heads up so this issue, which is bound to affect someone else at some point, could be resolved.

As I mentioned, I think it is likely that the fault does not lie in html-react-parser, but rather in one your of dependencies. It might be nice if you could locate the offending one and pass the issue onto them rather then just closing this one...

I'm happy to do that if you can tell me which one is causing the problem?

from html-react-parser.

I understand and appreciate your sentiment. The bug may be coming from html-dom-parser.

It would be nice to create a simplified test case that reproduces this bug in the other package.

from html-react-parser.

Thanks. I'll raise an issue there as soon as I have a few spare minutes.

from html-react-parser.

Closing issue due to inactivity. Feel free to reopen if there are new updates.

from html-react-parser.