Using x-morph, new Alpine components don't initialize about alpine-ajax HOT 2 OPEN

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?

from alpine-ajax.

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
		}
	},
})

from alpine-ajax.