Failed to execute 'removeChild' on 'Node' with FontAwesome in React

I think i figured out why this is happening. It appears it has to do with the way FontAwesome 5 replaces <i> tags with <svg> tags. I believe this is incompatible with the way React handles removing elements from the DOM. see: https://fontawesome.com/how-to-use/svg-with-js#with-jquery

The workaround I use is noted at the bottom of that documentation which is to include:

<script>  FontAwesomeConfig = { autoReplaceSvg: 'nest' }</script>

I include it in my header, which there might be a better placement for it, but it appears to resolve the issue for me at least. It might affect some CSS logic you could have for any classes which you have directed specifically at FontAwesome elements that are direct children of other classes/ids so you might want to just check to make sure all of your styling looks right, since it's now nesting the <svg> tag within the <i> tag instead of replacing it.

Alternatively you could just wrap the <i> tag yourself.For example:

{this.state.loading === true ? <div><i className="fa-spin fas fa-sync"></i></div> ...

should work.

UPDATE (12/10/18):Now there is a better explanation in the documentation for why this is happening in the official docs and an explanation for how to integrate this FontAwesome with a javascript library here. The method for automatically nesting your <i> tags is now done inside the script tag for fetching the FontAwesome javascript library <script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" data-auto-replace-svg="nest"></script>. There is also now official support for the FontAwesome React library which resolves this issue as well.