Desde que AlpineJS se actualizó a Alpine 3 , no he podido hacer que funcione con Rails 6 y webpacker, solo he podido hacer que funcione al vincular a la versión CDN de Alpine.
En el pasado, con AlpineJS 2 solo tenía que ejecutar yarn add alpinejs y luego poner require('alpinejs') en javascript/packs/application.js .
Por todo lo que he leído, parece que cuando uso Turbo on Rails 6.1 necesito hacer esto:
// Alpine JS import 'alpine-turbo-drive-adapter' require('alpinejs') (Después de instalar los paquetes, obviamente). Estoy cargando mi javascript en mi encabezado html con <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> .
Pero, eso todavía no funciona. ¿El paquete AlpineJS NPM simplemente no funciona con webpacker y Rails?
¿Cómo hago para que esto funcione en lugar de cargarlo desde Alpine JS CDN?
ACTUALIZAR:
Me aseguré de ejecutar yarn add alpinejs y yarn add alpine-turbo-drive-adapter . También actualicé mi archivo packs/application.js para asegurarme de que usa Turbo y no Turbolinks. Se ve así ahora:
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")Después de esas dos actualizaciones, ahora recibo este error de consola:
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 requiere webpack 5 y, por lo tanto, el webpacker 6 (actualmente) inédito, por lo que puede intentar usar el candidato de lanzamiento de webpacker 6 o usar la versión CDN de AlpineJS 3 por el momento.
Como alternativa, hay algunas gemas nuevas que se pueden usar con Rails, como https://github.com/rails/jsbundling-rails y https://github.com/rails/importmap-rails . Si desea seguir con el paquete web, entonces la gema jsbundling-rails es probablemente una mejor opción que el paquete web ahora.
Parece un problema de versión incompatible...
En package.json, establezca una versión específica en alpine y alpine-turbo-drive-adapter:
"alpine-turbo-drive-adapter": "1.1.0", "alpinejs": "3.2.3",No olvide eliminar su (yarn.lock o package.json.lock) y ejecutar (yarn install o npm install).
En la importación application.js:
import Alpine from 'alpinejs' window.Alpine = Alpine $(() => { Alpine.start(); });¡Espero que te funcione!
import Alpine from 'alpinejs' window.Alpine = Alpine Alpine.start()Parece que necesita usar importar para importar el módulo.
referencia: https://alpinejs.dev/essentials/installation