I finally solved it. And I haven’t used any npm install bullshit as you both suggested.
The problem was in esbuild/Phoenix and not in Alpine.
Not for you, who instead of helping were attacking and bullying me by trying to make me look bad, but for others who because of the lack of up to date docs will struggle, I will offer this solution:
If you hate node package manager and you wanted to escape it and not to go back to it do this:
- download the JavaScript file here:
https://unpkg.com/alpinejs@3.7.0/dist/cdn.min.js - rename this file to
alpine.jsor add the version number to keep track - put this file inside assets/vendor folder (where the topbar.js file is)
- in
assets/js/app.jsfile make these changes:
import topbar from "../vendor/topbar";
import Alpine from "../vendor/alpine"; <-- add this line
then:
import Alpine from "../vendor/alpinejs_3_7_0";
window.Alpine = Alpine; <-- add this line
Alpine.start(); <-- add this line
let csrfToken = document
and:
let csrfToken = document
.querySelector("meta[name='csrf-token']")
.getAttribute("content");
let hooks = {}; <-- add this line
let liveSocket = new LiveSocket("/live", Socket, {
params: { _csrf_token: csrfToken },
hooks: hooks, <-- add this line
dom: { <-- add this line
onBeforeElUpdated(from, to) { <-- add this line
if (from._x_dataStack) { <-- add this line
window.Alpine.clone(from, to); <-- add this line
} <-- add this line
}, <-- add this line
}, <-- add this line
});
- open
config/config.exsfile and find there:
--target=es2016and change it to--target=es2017 - restart the server
- Alpine is now working
