Failed to execute 'insertBefore' on 'Node'

[eliottrobson]

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

The error is originating from this block in source:

petite-vue/src/directives/if.ts

Lines 49 to 55 in 63c60d3

	const removeActiveBlock = () => {
	if (block) {
	parent.insertBefore(anchor, block.el)
	block.remove()
	block = undefined
	}
	}

My HTML that's triggering this is pretty simple

<div>
    <button type="submit">
        <span>Submit Application</span>
        <i v-if="status.loading" class="fas fa-spinner-third fa-spin"></i>
     </button>
</div>

From my example matching the code to the source:

parent   = <button> dom element
anchor   = <!--v-if--> comment element
block.el = <i class="fas fa-spinner-third fa-spin"></i>

A workaround is to place the v-if on a wrapper element from the I. I believe that Font Awesome is changing the html internally but Vue isn't aware. A better error might help others in future, but posting this to help everyone out in case you get a similar issue.