IE11 svg tag is empty

[Anton]

In ie 11, react-inlinesvg inserts an empty svg tag

<svg xmlns="http://www.w3.org/2000/svg" class="myclass" />
how to fix?

[Gil Barbara]

It's impossible to know what's going on without seeing some code.
Please create a codesandbox or similar.

[Anton]

in console
Unable to get property 'Symbol(Symbol.iterator)_a.cgipohxhaet' of undefined or null reference
Could not convert the src to a React element

[Gil Barbara]

@astranavt I can't know what's going on without seeing the code...

[Anton]

https://codesandbox.io/s/nice-leaf-06fd2

[Gil Barbara]

Codesandbox isn't loading in IE11, but I get it to work with stackblitz in https://react-inlinesvg.stackblitz.io/

[Anton]

Codesandbox isn't loading in IE11, but I get it to work with stackblitz in https://react-inlinesvg.stackblitz.io/

how can I see the code?

[Gil Barbara]

https://stackblitz.com/edit/react-inlinesvg
But there's nothing special about it.
<SVG src={require('./logo.svg')} width={100} />

[doxic012]

The code does not produce a valid dom element in IE using the 'react-from-dom' package at line 237:

node is valid, element does not have any children though.

I've tested this with the following setup in typescript:

(Sorry, the code blocks mess this up, so I used an image from np++)

--
Works in all other Browsers (Chrome, Edge Beta, Edge, Firefox). Maybe an update to the react-from-dom package already solves this?

This occurs in all versions >= 1.1.0, in 1.0.0 ie11 renders the svg correctly.

[Gil Barbara]

@doxic012 Please post an example at stackblitz or similar.

[doxic012]

https://stackblitz.com/edit/react-ts-qkg1nc?file=DynamicIcon.tsx

I put a debugger into the method used in the preProcessor.
Debug into the code ie11 with f11 until you get to the getElement()-Method, where the node is converted.

In this case it results in an object does not support method "isNaN".
In our production system it does not throw an error, but the result element variable simply does not have any children which results in an empty svg-tag instead of the fallback img being rendered.

[Gil Barbara]

@doxic012 The tag isn't empty, I can see the SVG on IE11

[Anton]

@gilbarbara
https://stackblitz.com/edit/react-wjzq1v

[Gil Barbara]

I see. You'll need a polyfill for Number.isNaN on IE.
I'll add to the README

[Niels Söth]

I found the problem. Had the same problem and if I remove the

uniquifyIDs={true}

it works in IE11.

edit:

After further testing, I get some weird renderings if I leave this property out. So I think I need it. I digged deeper and in the InlineSVG.prototype.getNode() function, react_from_dom is called to get the node:
var node = react_from_dom_1.default(svgText, { nodeOnly: true });

node does not have a property "children" thus in the InlineSVG.prototype.updateSVGAttributes() function, __spread is called with undefined. __spread then calls __read with undefined as argument and on this undefined object, "Symbol.iterator" should be accessible:
var m = typeof Symbol === "function" && o[Symbol.iterator];

And there's the error because it is undefined.