Using x-morph, new Alpine components don't initialize

[jonasfeige]

I am using the Alpine morph plugin to merge new content onto the page. Maybe I'm doing something wrong, but If that content contains new Alpine components, these don't get initialized.

[imacrayon]

Hey, thanks for reaching out. So I made a basic test in CodePen just to confirm that new components do initialize with Morph here: https://codepen.io/imacrayon/pen/JjVZMrB

I'm guessing your situation is probably a more complicated though. There's definitely edge cases where the morph algorithm breaks down, so I might need a little more info about how you're using it. Would you be able to provide a code sample that reproduces your issue?

[jonasfeige]

Hey, thanks for the quick reply and sorry for being so brief in my initial description of the issue.

I've made another pen that reproduces my setup and it seems to be working as expected. Basically, I have two routes (/ and /books, where the latter is morphing an alpine component that needs to then initialize. https://codepen.io/jonasfeige/pen/LYvBKay

I still could not get it to work in my actual project, though. The Alpine component will not initialize and therefor the hidden text will be visible on morphing. I assume it has to do with my build process (using esbuild). Maybe you have an idea?

This is my app.js:

import Alpine from 'alpinejs'
import morph from '@alpinejs/morph'
import collapse from '@alpinejs/collapse'
import ajax from '@imacrayon/alpine-ajax'

import post from './alpine/data.post'

Alpine.plugin(collapse)
Alpine.plugin(morph)
Alpine.plugin(ajax)

document.addEventListener('alpine:init', () => {
    Alpine.data('post', post)
})

Alpine.start()

And this is the (abbreviated) data.post.js:

export default () => ({
    more: false,
    toggleMore() {
        if (!this.more) {
            this.more = true
        } else {
            this.more = false
        }
    },
})

[imacrayon]

Hey @jonasfeige, just following up on old issues, were you able to get unstuck on this?

[jonasfeige]

I didn't, but I ran into similar issues with HTMX, so I'm assuming it's connected to my setup. Feel free to close this!

[imacrayon]

Ok, I’ll close this for now, but feel free to reopen this if you pull together some more code samples or a reproduction. I’m happy to help debug things.