Error: Required property is missing! [node.parentNode]

[denisov-k]

Hello everyone!

I have next composition:

   <img v-svg-inline src="@/assets/widget/expand.svg" v-if="!expanded" />
   <img v-svg-inline src="@/assets/widget/collapse.svg" v-else />

After toggle v-if value I have next error in console.

Who can tell me what is the problem?

[oliverfindl]

Hello,

it looks like, Vue somehow removed parent element of your <img> tag, therefore this plugins fails to replace <img> tag with <svg> tag.

vue-svg-inline-plugin/src/index.js

Lines 353 to 357 in 97be1e3

	/* throw error if node argument is missing parentNode property */
	if(!node.parentNode) throw new Error(`[${PACKAGE_NAME}] Required property is missing! [node.parentNode]`);
	/* replace node with new node */
	node.parentNode.replaceChild(newNode, node);

Please try to wrap your <img> tags with <div> tags, and move your conditions there. If this won't resolve your issue, please provide minimal reproduction repository, so I can investigate further.

Thanks.