Icon not showing: "Error: Parent node is null"

[michaellill-corefihub]

SVG is not injected properly when loading the svg the 2nd time:

<ReactSVG
                                src="/website-assets/logos/letsencrypt.svg"
                                wrapper="div"
                                style={{maxWidth: '120px'}}
                                afterInjection={console.log}
                            />

"Error: Parent node is null" is printed to console.

When removing the style attribute it seems to work.
Is this expected?

[Shawn Taylor]

I'm having the same issue. My SVGs are getting injected properly, but if I add any style or beforeInjection attribute, some of them do not get injected.

[Tane Morgan]

Thanks for the report, can reproduce the error, will post back when I know more.

[Tane Morgan]

Some more info would really help 🙏

@michaellill-corefihub: Keen to see some code re "loading the svg the 2nd time". Can you please create a repro using the Basic Usage sandbox? Just want to make sure I'm looking at the right thing.

@mapsandapps: Your issue sounds slightly different to the original issue, but for now can you also provide some more detail around what you're seeing, via a fork of the sandbox as well?

[michaellill-corefihub]

@tanem I tried creating a repro. I did not succeed. In our project we are using react-router. Could this be part of the problem?

[Shawn Taylor]

I also tried creating a repro and have not been successful. I haven't figured anything out on my end that is different about the ones that are getting injected vs. the ones that aren't, which would probably be the key to a repro. Still looking...

As noted in #1295, if i interact with the component, the icon does appear.

[michaellill-corefihub]

@tanem You wrote that you were able to reproduce the issue. How did you do it?

[Tane Morgan]

@tanem You wrote that you were able to reproduce the issue. How did you do it?

https://codesandbox.io/s/lucid-butterfly-5n8ds

Haven't had the time to look further unfortunately. Will post back once I have.

[Tane Morgan]

@michaellill-corefihub @mapsandapps looks like this could be a combination of a long-standing bug plus an issue with some recent changes.

Just published a beta version which hopefully fixes the issues you're seeing: 14.0.0-beta.1. Keen to hear how you get on?

[michaellill-corefihub]

@tanem 14.0.0-beta.1 seems to work for me. Good job, thanks!

[Tane Morgan]

Good to hear, thanks for the update @michaellill-corefihub, I'll let you know once the proper version is published.

[Shawn Taylor]

@tanem Working for me too! Thanks for being so communicative and getting a fix out quick!

[Tane Morgan]

Just published the fix in v14.0.0, I'll wait till I hear back before closing the issue.

[michaellill-corefihub]

Unfortunately the fix seems to have brought new issues:

The following code

<ReactSVG
                                        src="/website-assets/icons/timer.svg"
                                        wrapper="svg"
                                        className="fill-cfm-green d-flex align-items-center width-20 mr-1"
                                    />

yields:

[Tane Morgan]

@michaellill-corefihub at first glance I can't see anything wrong with what you posted there, can you please explain what the issue is?

Also, can you please open a new issue for this (just makes it easier for me to keep track of what's going on)? 🙏