If you ran into the above error before, one of the most common causes is forgetting to define exactly one root element.
So, if your code looks like this:
<template x-if="loading"> Loading... </template>
You need to change it to this (instead of a div
you may use any other valid HTML element):
<template x-if="loading"> <div>Loading...</div></template>
As stated in the Alpine.js docs, template
tags may only contain one root element, and text in itself does not qualify as an element.
I hope this post helped you! If you have any questions, hit me up on X 😊.
You might find these related articles helpful or interesting, make sure to check them out!