Отладка и частые проблемы

Большинство ошибок в Alpine сводится к трём причинам: опечатка в выражении, неверный порядок запуска и элементы, которые видны до старта Alpine. Здесь — как их распознать и исправить.

Сообщения в консоли

Если выражение в директиве падает, Alpine пишет в консоль предупреждение «Alpine Expression Error» с текстом ошибки, самим выражением и элементом:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ tasks: ['Купить молоко'] }">
  <p x-text="taks.length"></p>
</div>

Под примером видна ошибка: taks is not defined и выражение taks.length. Опечатка в имени — самая частая причина. В браузере откройте консоль инструментов разработчика: там сообщение кликабельно и ведёт к элементу.

x-cloak: мигание при загрузке

Скрипт Alpine запускается после того, как браузер показал HTML. Элементы с x-show="false" успевают мелькнуть на долю секунды: модальное окно или меню появляется и исчезает. Директива x-cloak прячет элемент, пока Alpine не запустится, — Alpine убирает её при старте. Но правило CSS для неё нужно добавить самим:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<style>
  [x-cloak] { display: none !important; }
</style>
 
<div x-data="{ open: false }">
  <button @click="open = !open">Меню</button>
  <ul x-show="open" x-cloak>
    <li>Изменить</li>
    <li>Удалить</li>
  </ul>
</div>

Меню не появляется при загрузке страницы даже на медленном соединении. Правило [x-cloak] кладут в общий CSS сайта в <head>, а x-cloak ставят на всё, что скрыто по умолчанию.

Порядок запуска

Признак	Причина	Исправление
Директивы не работают совсем	Нет `defer` у скрипта или не вызван `Alpine.start()`	Добавить `defer`, вызвать `Alpine.start()`
`todos is not defined`	`Alpine.data` зарегистрирован после старта	Регистрировать в `alpine:init` или до `Alpine.start()`
Плагин не работает	Скрипт плагина ниже Alpine	Подключать плагины выше Alpine
Всё срабатывает дважды	Alpine подключён два раза	Оставить одно подключение

Посмотреть данные компонента

Чтобы увидеть, что сейчас лежит в данных, выведите их на страницу. JSON.stringify из урока «JSON» учебника делает объект читаемым:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ title: '', tasks: ['Купить молоко'] }">
  <input x-model="title" placeholder="Новая задача">
  <pre x-text="JSON.stringify({ title, tasks }, null, 2)"></pre>
</div>

Блок <pre> показывает данные компонента и обновляется при вводе. В консоли браузера то же даёт Alpine.$data(элемент). Существуют и расширения для браузера, например Alpine.js devtools, которые показывают дерево компонентов.

Частая ошибка

Добавить x-cloak, но забыть правило CSS. Сам по себе атрибут ничего не прячет — это обычный атрибут, который Alpine удаляет при старте. Без правила [x-cloak] { display: none !important; } мигание остаётся. Если правило есть, а элемент не появляется никогда, проверьте, что Alpine вообще запустился: скорее всего, скрипт не загрузился.