IE11 - InlineSVGError: Could not convert the src to a React element
OVigilante opened this issue · comments
Hello,
On a project that I'm maintenance, initially I as used the version 0.8.4 and SVG worked fine in all Browsers.
In February I updated to the latest version, the 1.2.0 but, I'm having problems related to the refactoring that was made since version 1.0.0.
In Internet Explorer 11, that is the legacy that we support for this project, is showing two types of Errors.
First error:
- description: "Unable to get property '__symbol:interator....' of undefined or null reference"
- stack: "TypeError: Unable to get property '__symbol:interator....' of undefined or null reference"
Second error:
- data: undefined
- description: "" (no description)
- message: "Could not convert the src to a React element"
- name: "InlineSVGError"
I also created a basic React App using this instructions:
(https://reactjs.org/docs/create-a-new-react-app.html)
Than I used your usage info:
(https://github.com/gilbarbara/react-inlinesvg#usage)
And your example info:
(https://github.com/gilbarbara/react-inlinesvg#example)
Installed this polyfill:
(https://www.npmjs.com/package/react-app-polyfill)
And the errors are the same.
Windows 10 with Internet Explorer
Hello,
I don't support legacy browsers.
Are you sure you are importing react-app-polyfill before anything else in your entry script?
You can try core-js too.
Hello,
I forgot to mention that the SVG Works on IE 11, using react-app-polyfill but, when I use this properties:
uniqueHash {string} ▶︎ a random 8 characters string [A-Za-z0-9]
A string to use with uniquifyIDs.
uniquifyIDs {boolean} ▶︎ false
Create unique IDs for each icon.
It gives the error that I mention in my first post.
And I tested with core-js and the same errors continue to show and SVG can't be read when using the properties uniqueHash and uniquifyIDs.
Please provide an example on stackblitz or similar (that runs on IE11) so I can take a look.
This is an example without and with uniqueHash and uniquifyIDs.
Without this properties, it works on IE11.
Width this properties, doesn't work, showing that errors.
(https://stackblitz.com/edit/react-inlinesvg-ie11)
Thanks for taking a look.
Hey @OVigilante
I checked your example but couldn't find possible causes easily.
Feel free to submit a PR
Width this properties, doesn't work, showing that errors.
@OVigilante
I find decision. problem with node.children. Add Polyfill in your project