Uncaught ReferenceError: Alpine is not defined

Question

Using Alpine with Laravel Vite is not working as expected. I'm getting the error: Uncaught ReferenceError: Alpine is not defined

My app.js file:

import Alpine from 'alpinejs';

Alpine.start();

window.Alpine = Alpine; // this should make Alpine globally accessible, right?

Including the app.js file in the head with: @vite('resources/js/app.js')

Then, when trying to use Alpine I placed the following script on the page:

<script type="text/javascript">
    document.addEventListener('alpine:init', () => {
        console.log('alpine loaded') // this works so the event listener is called
        console.log(Alpine) // Uncaught ReferenceError: Alpine is not defined
    });
</script>

When opening the developer console and typing Alpine the object does actually exist. Any ideas on why Alpine isn't available in the global scope?

depending where you placed that code and the @vite, it could be possible the js script is run first and then @vite (download and load the file) so you don't have Alpine available, share where are you placing both parts please — matiaslauriti
– matiaslauriti, Commented Dec 9, 2022 at 15:55
@vite is included in the head, and the script tag is included just before closing the body. — Vinze
– Vinze, Commented Dec 13, 2022 at 7:21
after the page loaded, if you manually do window.Alpine or Alpine on the browser javascript console, does it show up or is it still undefined? — matiaslauriti
– matiaslauriti, Commented Dec 13, 2022 at 18:25
Did you get the solution to this? I am also facing a problem. stackoverflow.com/q/79155188/15770919 — Indeche Ojukwu
– Indeche Ojukwu, Commented Nov 4, 2024 at 20:16

linktoahref · Accepted Answer · 2025-06-03 10:29:24Z

3

You should do it like that.

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

Then add @vite('resources/js/app.js') in the header of your blade file.

edited Jun 3 at 10:29

linktoahref

8,0273 gold badges32 silver badges54 bronze badges

answered Jul 21, 2023 at 0:41

Johny22

415 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Indeche Ojukwu · Accepted Answer · 2024-11-04 20:37:47Z

1

How you are ordering vite manifest and importing livewireStyles may be the issue. So alpine is loaded automatically incase you are using livewire 3 or anything above that. In your layout file first add the vite manifest @vite(['resources/js/app.js']) and in the app.js, you necessarily DO NOT need to have this...

// import Alpine from 'alpinejs';
// window.Alpine = Alpine;
// Alpine.start();

.... as it would lead to an error Alpine instance loaded twice. Not a big issue but it is good to have that in mind. After vite you can then put @livewireStyles and this should remove the console.log errors and import alpine globally.

answered Nov 4, 2024 at 20:37

Indeche Ojukwu

1,0838 silver badges18 bronze badges

Collectives™ on Stack Overflow

Uncaught ReferenceError: Alpine is not defined

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related