# Alpine init issue

**URL:** <https://forum.elixirforum.com/t/alpine-init-issue/42522>\
**Category:** Questions\
**Tags:** phoenix, alpinejs\
**Created:** [September 21, 2021, 4:09pm UTC](https://forum.elixirforum.com/t/alpine-init-issue/42522 "2021-09-21T16:09:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![CherryPoppins](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/c/53a042/32.png) [@CherryPoppins](https://forum.elixirforum.com/u/CherryPoppins)\
**Post date:** [September 21, 2021, 4:09pm UTC](https://forum.elixirforum.com/t/alpine-init-issue/42522/1 "2021-09-21T16:09:46Z")

</div>

Let’s say I have the following in my liveview template:

```elixir
my_template.html.leex
<div phx-hook="myHook">
  <div
    x-data="{inputvalue=''}"
    x-init="
      console.log('I AM INITING')
    "
  >
  <input x-model="inputValue">
  </div>
</div>
<script>
  document.addEventListener('alpine:init', () => console.log('INIT FROM SCRIPT TAG!'))
</script>

myHook.js
hooks.myHook = {
  mounted () {
    console.log('HOOK MOUNTED')
    document.addEventListener('alpine:init', () => console.log('INIT FROM HOOK'))
  }
}

```

My output is:

```elixir
INIT FROM SCRIPT TAG
I AM INITING
I AM INITING
HOOK MOUNTED
I AM INITING
I AM INITING

```

1. Why is the `x-init` running 4 times and how can I make it only run once?
2. How can I get my hook to execute before `x-init` or the `alpine:init` event runs?

---

<div class="post-metadata">

**Author:** ![ruslandoga](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/ruslandoga/32/22193_2.png) [@ruslandoga](https://forum.elixirforum.com/u/ruslandoga)\
**Post date:** [September 21, 2021, 6:11pm UTC](https://forum.elixirforum.com/t/alpine-init-issue/42522/2 "2021-09-21T18:11:09Z")

</div>

I think `x-init` runs first when you get plain html response, then it runs again when liveview inits. Does it run 4 times without hook as well? If not, then I guess it might be forced to run after every hook event (mounted and updated in your case).

Also, how do you have alpine+liveivew set up?

---

<div class="post-metadata">

**Author:** ![CherryPoppins](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/c/53a042/32.png) [@CherryPoppins](https://forum.elixirforum.com/u/CherryPoppins)\
**Post date:** [September 21, 2021, 7:18pm UTC](https://forum.elixirforum.com/t/alpine-init-issue/42522/3 "2021-09-21T19:18:21Z")

</div>

My alpine setup (using “alpinejs”: “^3.2.3”):

```elixir
import Alpine from 'alpinejs'

window.Alpine = Alpine
Alpine.start()

...

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

```

---

<div class="post-metadata">

**Author:** ![ruslandoga](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/ruslandoga/32/22193_2.png) [@ruslandoga](https://forum.elixirforum.com/u/ruslandoga)\
**Post date:** [September 22, 2021, 8:13am UTC](https://forum.elixirforum.com/t/alpine-init-issue/42522/4 "2021-09-22T08:13:31Z")

</div>

Try also removing `Alpine.initTree`. Having it called all the time might lead to problems, and it’s not always necessary. You can call it conditionally, like if `from` element has a `data-init-tree` attribute.

---

<div class="post-metadata">

**Author:** ![CherryPoppins](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/c/53a042/32.png) [@CherryPoppins](https://forum.elixirforum.com/u/CherryPoppins)\
**Post date:** [September 22, 2021, 1:28pm UTC](https://forum.elixirforum.com/t/alpine-init-issue/42522/5 "2021-09-22T13:28:16Z")

</div>

So, I removed the `window.Alpine.initTree(to)` line and now my output is:

```elixir
INIT FROM SCRIPT TAG
I AM INITING
HOOK MOUNTED
I AM INITING
I AM INITING

```

That x-init is now running 3 times instead of 4. Also, with or without the hook, those last 2 init console.logs are still running.

---

<div class="post-metadata">

**Author:** ![ruslandoga](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/ruslandoga/32/22193_2.png) [@ruslandoga](https://forum.elixirforum.com/u/ruslandoga)\
**Post date:** [September 22, 2021, 3:48pm UTC](https://forum.elixirforum.com/t/alpine-init-issue/42522/6 "2021-09-22T15:48:49Z")

</div>

Btw, I think `x-data` needs to be an object, not a code block, so try replacing `x-data="{inputvalue=''}"` with `x-data="{inputvalue: ''}"` and checking the results, maybe it affects something (maybe alpine thinks it’s `Alpine.data` component and executes it). Either way, I think you won’t be able to make `x-init` run once due to how liveview work, it would run at least twice. And regarding 2, try running `Alpine.start()` after liveview calls.

Also, try running without liveview connect, how many logs to do see in that case?

---

<div class="post-metadata">

**Author:** ![CherryPoppins](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/c/53a042/32.png) [@CherryPoppins](https://forum.elixirforum.com/u/CherryPoppins)\
**Post date:** [September 22, 2021, 4:05pm UTC](https://forum.elixirforum.com/t/alpine-init-issue/42522/7 "2021-09-22T16:05:44Z")

</div>

Sorry the `x-data="{inputvalue=''}"` was a typo, in my actual code I have it as you said, `x-data="{inputvalue: ''}"`.

On the `Alpine.start()`, I thought about that but it seems kinda hacky, and I’m also not always sending a message back to the hook on liveview calls so wouldn’t necessarily be able to always call `Alpine.start()` after liveview calls without going out of my way to do so. It seems I’m not the only on experiencing this and Alpine apparently doesn’t think it is a bug since they moved [this ticket](https://github.com/alpinejs/alpine/issues/1706) to discussion. Would have been nice to have gotten an explanation when moved. I appreciate you trying to help me out @ruslandoga!