Issues with phoenix liveviews 16

Hello!
I am following these tutorial Phoenix 1.6.0 LiveView + esbuild + Tailwind JIT + AlpineJS - A brief tutorial. to set up liveviews with alpinejs, I ve tried to do it step by step but I am not able to figure out what Iam missing.

After making the js setup, everything seems to work just fine, but I cant get alpine to work. I put some directives and events just to make sure it was working, but it just seems like if there were no alpine code at all
my only guess is something in the file app.js, specially this piece of code

let liveSocket = new LiveSocket("/live", Socket, {
  params: { _csrf_token: csrfToken },
  hooks: hooks,
  dom: {
    onBeforeElUpdated(from, to) {
      if (from._x_dataStack) {
        // _x_dataStack is undefined
        window.Alpine.clone(from, to);
      }
    },
  },
});

I even tried to clone the authors repository, but still the same

Thanks in advance

Hi, exactly same code works fine for me.

Does AlpineJS work at all? This code above only help with communication with LiveView, so if AlpineJS doesn’t work - problem is somewhere else. Make sure you run Alpine.start() after import.

1 Like

This is the Alpine JS v3 property. Can you check your assets/node_modules/alpinejs/package.json file to see what the version it has is? You may need to bump the version if it’s 2.x

Alpine v3?

import Alpine from "alpinejs";

window.Alpine = Alpine;
Alpine.start();

let liveSocket = new LiveSocket("/live", Socket, {
  dom: {
    onBeforeElUpdated(from, to) {
      if (from._x_dataStack) {
        window.Alpine.clone(from, to);
      }
    },
  },
});
1 Like
import Alpine from "alpinejs"

window.Alpine = Alpine
Alpine.start()

let liveSocket = new LiveSocket("/live", Socket, {
  params: {_csrf_token: csrfToken},
  hooks: hooks,
  dom: {
    onBeforeElUpdated(from, to) {
      if (from._x_dataStack) {
        console.log('??????????')
        window.Alpine.clone(from, to)
        window.Alpine.initTree(to)
      }
    }
  }
})

I know my appjs is working because I can use js snippets, and in chrome console i can

console.log(Alpine)

and get a response

yes

{
  "dependencies": {
    "alpinejs": "^3.7.0",
    ....
  },
}

I will try it with a lower version

I made a mistake in when posting this, i am using liveviews v17 not 16, can it be the issue?

i am trying to do some simple example like this

<button x-on:click="alert('hello world')">Click me</button>

You need x-data attribute to define a scope for Alpine

<button x-on:click="alert('hello world')">Click me</button>

like this?

I don’t see any x-data there…

<button x-data x-on:click="alert('hello world')">Click me</button>

You might want to read the Alpine docs

1 Like

I never saw that i needed to wrap everything in an x-data tag
thanks everyone who helped me !!!