why do I keep getting this error: "vNode passed as children has unexpected type" on Stencil?

Question

Why do I keep getting this error when I try to return an HTML element?

vNode passed as children has unexpected type.
Make sure it's using the correct h() function.
Empty objects can also be the cause, look for JSX comments that became objects.

This is my code:

@Prop({ mutable: true }) path: string = '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5v-5a7 7 0 1 0-14 0v5c-.03 2.47-.72 4.887-2 7h18a13.833 13.833 0 0 1-2-7Z"/>'

parseHTML() {
     let template = document.createElement('template');
     template.innerHTML = this.path
     let path = template.content.querySelector("path")
    const SVG = <svg class="inline-svg" width={this.ifxIcon.width} height={this.ifxIcon.height} xmlns="http://www.w3.org/2000/svg"     viewBox="0 0 16 16">{path}</svg>
    return SVG;
}

render() {
return {this.parseHTML()}
}

If I copy-paste the path string directly inside the innerHTML of the SVG element, then it works, but if I dynamically insert the path variable, I get this error, and the icon does not get displayed. Why, and how do I fix this?

Answer 1

You’re actually returning an object instead of just the JSX. Remove the curly braces and the error should disappear:

render() {
  return this.parseHTML();
}