Блог

С тех пор, как AlpineJS обновился до Alpine 3, я не смог заставить его работать с Rails 6 и webpacker, я смог заставить его работать только при подключении к CDN-версии Alpine.

В прошлом с AlpineJS 2 мне просто приходилось запускать yarn add alpinejs , а затем вводить require('alpinejs') javascript/packs/application.js .

Из всего, что я прочитал, кажется, что при использовании Turbo на Rails 6.1 мне нужно это сделать:

 // Alpine JS
import 'alpine-turbo-drive-adapter'
require('alpinejs')
 

(Очевидно, после установки пакетов). Я загружаю свой javascript в свой заголовок html с <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> помощью .

Но это все равно не работает. Пакет AlpineJS NPM просто не работает с webpacker и Rails?

Как мне заставить это работать вместо загрузки из Alpine JS CDN?

Обновить:

Я убедился, что запустил yarn add alpinejs и yarn add alpine-turbo-drive-adapter . Я также обновил свой packs/application.js файл, чтобы убедиться, что он использует Turbo, а не Turbolinks. Теперь это выглядит так:

 import Rails from "@rails/ujs"
import "@hotwired/turbo"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
ActiveStorage.start()

import "controllers"

// Custom JS files
import 'alpine-turbo-drive-adapter'
import Alpine from "alpinejs"
window.Alpine = Alpine
Alpine.start()

// require("./components/direct_uploads")
require("stylesheets/application.scss")
 

После этих двух обновлений я теперь получаю эту ошибку консоли:

 TypeError: func(func, completeScope).catch is not a function. (In 'func(func, completeScope).catch(function (error2) {
        return handleError(error2, el, expression);
      })', 'func(func, completeScope).catch' is undefined)
 

Для AlpineJS 3 требуется webpack 5 и, следовательно, (в настоящее время) неизданный webpacker 6, поэтому вы можете попробовать использовать релиз-кандидат webpacker 6 или использовать CDN-версию AlpineJS 3 на данный момент.

В качестве альтернативы, есть несколько новых драгоценных камней, которые можно использовать с Rails, например https://github.com/rails/jsbundling-rails и https://github.com/rails/importmap-rails . Если вы хотите придерживаться webpack, то jsbundling-rails gem, вероятно, является лучшим вариантом, чем webpacker now.

Похоже, проблема с несовместимой версией…

В package.json установите конкретную версию для alpine и alpine-turbo-drive-adapter:

 "alpine-turbo-drive-adapter": "1.1.0",
"alpinejs": "3.2.3",
 

Не забудьте удалить свой (yarn.заблокировать или package.json.lock) и запустить (yarn install или npm install).

В application.js импорт:

 import Alpine from 'alpinejs'
window.Alpine = Alpine
$(() => {
  Alpine.start();
});
 

Я надеюсь, что это сработает для вас!

 import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
 

Похоже, вам нужно использовать import для импорта модуля.

ссылка: https://alpinejs.dev/essentials/installation