Issue Using Alpine.js with Vite in a fresh Laravel 10 installation

I've been attempting to use Vite for the first time, I'm more familiar with Laravel Mix. It appears that when I include alpine functions in app.js and build with npm run build those functions cannot be run from the directives in the markup. Heres my code:

in index.blade.php:

<div
	class="max-w-7xl mx-auto sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-4"
	x-data="solar"
>
	<form @submit.prevent="addComponent">
		<div class="mt-4">
			<x-select-input id="component" :items="$products->pluck('name', 'id')"></x-select-input>
		</div>
		<div class="mt-4">
			<x-primary-button>Add Component</x-primary-button>
		</div>
	</form>
</div>

<div>
	<ul class="w-96">
		<template x-for="component in components">
			<li
				class="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50"
				x-text="component.name" >
			</li>
		</template>
	</ul>
</div>

in app.js:

import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();


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

        components: [],

        addComponent(elem) {
            let item = document.getElementById('component');
            this.components.push({
                id: item.value,
                name: item.options[item.selectedIndex].text,
            });
        },
    }));
});

And in vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

If include the same Alpine.data() function in a script tag within the view (index.blade.php), it works flawlessly: but when it's placed within app.js and included in the resulting build I get the error:

Alpine Expression Error: addComponent is not defined

Expression: "addComponent"

How can I solve this and put my functions in the Vite build instead of in the view?

As stated in the alpine.js docs:

> If you imported Alpine into a bundle, you have to make sure you are registering any extension code IN BETWEEN when you import the Alpine global object, and when you initialize Alpine by calling Alpine.start().

To me it looks like this shouldn't be anything but just an ordering issue (I've had the same problem myself before). Call Alpine.start() AFTER all of your alpine.js code. Your app.js should look something like this:

import Alpine from 'alpinejs';
window.Alpine = Alpine;

Alpine.data('solar', () => ({ ... }));

Alpine.start();

Note that you don't need the 'alpine:init' event listener when using a build system like this. Have a look at this section in the docs for an example. I'd recommend extracting all of your alpine.js components out of app.js into individual files for better separation of concerns, and of course to prevent your app.js from becoming too bloated when you start adding more components. Something like this:

// app.js
import Alpine from 'alpinejs';
window.Alpine = Alpine;

import component1 from './alpine_components/component1.js';
import component2 from './alpine_components/component2.js';
...

Alpine.data('component1', component1);
Alpine.data('component2', component2);
...

Alpine.start();

// alpine_components/component1.js
export default () => ({
	...
});