kalkatfyodor
Alpine.js loaded 2 times
I have been trying to solve this issue with Alpine in Phoenix 1.6 LiveView:
and it now works.
But the problem is that I am loading alpine.js twice.
Once inside the <head></head> in root.html.heex file and the second time importing like:
<script defer src="https://unpkg.com/alpinejs@3.7.0/dist/cdn.min.js"></script>
and the second time in app.js because I have downloaded the file in the script tag and saves as alpine.js inside assets/vendor/alpine.js in the assets/js/app.js file:
// We import the CSS which is extracted to its own file by esbuild.
// Remove this line if you add a your own CSS build pipeline (e.g postcss).
import "../css/main.css";
// Alpine
import Alpine from "../vendor/alpine";
window.Alpine = Alpine;
Alpine.start();
// If you want to use Phoenix channels, run `mix help phx.gen.channel`
// to get started and then uncomment the line below.
// import "./user_socket.js"
or as suggested by the user in the linked post like:
import { LiveSocket } from "phoenix_live_view";
import topbar from "../vendor/topbar";
import Alpine from "../vendor/alpine";
// Alpine
window.Alpine = Alpine;
Alpine.start();
let csrfToken = document
.querySelector("meta[name='csrf-token']")
.getAttribute("content");
let liveSocket = new LiveSocket("/live", Socket, {
params: { _csrf_token: csrfToken },
dom: {
onBeforeElUpdated(from, to) {
if (from._x_dataStack) {
window.Alpine.clone(from, to);
}
},
},
});
// Show progress bar on live navigation and form submits
topbar.config({
And it works. But it is loaded twice, at least I think it is leaded twice.
The reason why I have dowloaded the file is that I don’t want to use npm in PHX1.6.
If you suggest to remove the script inside the head tags - well then it will stop working.
The same with removing the import from app.js - it will stop working.
Any idea how to solve that?
Do any of you use Alpine js without using npm? How do you setup your app.js and root.html.heex and other files than?
Now, when I think about it, perhaps it has to be like that in LiveView (and loaded twice) because of the first load static html and then only use websocket principle? Any comments on that?
Or perhaps I am importing it wrongly in app.js? And when I import it correctly, I will be able to remove the script import inside head tags in root.html.heex?
Thanks for any help.
Most Liked
dimitarvp
btw if you want to express a diff, the forum system has a facility for that: put the diff word after the triple backticks like so: ```diff
So your code can look like this:
let csrfToken = document
.querySelector("meta[name='csrf-token']")
.getAttribute("content");
+ let hooks = {};
let liveSocket = new LiveSocket("/live", Socket, {
params: { _csrf_token: csrfToken },
+ hooks: hooks,
+ dom: {
+ onBeforeElUpdated(from, to) {
+ if (from._x_dataStack) {
+ window.Alpine.clone(from, to);
+ }
+ },
+ },
});
wmnnd
This isn’t quite true. You can use Subresource Integrity to make sure your users get a verified version of a given resource from a CDN.
It works by adding an SHA384 hash to the tag that includes the resource.
This is what it would look like for the most recent version of Alpine.
<script src="https://unpkg.com/alpinejs@3.7.0/dist/cdn.min.js" integrity="sha384-RdtRRt1iDhfyBdfZIXH83/BU+0bhkpr746r/OHT0eRgZB0W7gD8bDfabHV42kyyA" crossorigin="anonymous"></script>
You can easily generate these hashes here: https://www.srihash.org/
Sebb
the message was for Derek, and you are free to completely ignore it. And maybe take some time off coding. Maybe clean your car or do some knee bends. 
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"