Solving `Failed to execute 'importNode' on 'Document'` in Alpine.js

When you encounter the following error you most likely are not using a <template> tag in a for loop in Alpine.js.

Alpine Expression Error: Failed to execute 'importNode' on 'Document': parameter 1 is not of type 'Node'.

Let’s for example consider the following Alpine component.

<div x-data="{ users: ['You', 'Me', 'Someone Else'] }">
  <ul x-for="user in users">
    <li x-text="user"></li>
  </ul>
</div>

At least in Alpine.js version 3 this will show the error as mentioned above and not render any list items. This is due to the fact that x-for directives should only be declared on <template> tags, which contain only one root element. So the above example can be fixed as follows:

<ul x-data="{ users: ['You', 'Me', 'Someone Else'] }">
  <template x-for="user in users">
    <li x-text="user"></li>
  </template>
</ul>

The Alpine.js docs define two rules you should keep in mind when using x-for:

  • x-for MUST be declared on a <template> element
  • That <template> element MUST have only one root element

The <template> tag is a special HTML5 tag that is not visually rendered on a webpage directly. Instead it is meant to be instantiated with JavaScript once a page is loaded. You can think of it as an elements that just holds content, which you can render dynamically and reuse multiple times if you need to. A side note here is that Internet Explorer does not support the usage of the <template> tag.

Further Readings:

See Also

6 Non-Programming Books for Programmers