(Laravel Livewire) Alpinejs - install via NPM

[malogajski]

Until now I used CDN but the problem popped up last Friday (CloudFlare was returning an error for all unpkg links). I decided to install AplineJS via NPM.
What have I done:

• npm install alpinejs
• npm install @alpinejs/persist

Then I created the file apline.js (/resources/js/alpine.js) and added the following:

import Alpine from 'alpinejs';
import persist from '@alpinejs/persist'

Alpine.plugin(persist)

Alpine.start();

In the layout file I remove this:

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script>

And add this:
<script type="text/javascript" defer src="{{ asset('js/alpine.js') }}"></script>

At the end:
npm run dev

Now some functions not working properly and I get this error in the console:

SupportAlpine.js:315 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'version')
    at beforeAlpineTwoPointSevenPointThree (SupportAlpine.js:315:47)
    at isHiding (SupportAlpine.js:299:9)
    at alpinifyElementsForMorphdom (SupportAlpine.js:274:17)
    at onBeforeElUpdated (index.js:479:17)
    at callHook (morphdom.js:35:12)
    at morphEl (morphdom.js:199:21)
    at morphdom.js:332:37
    at morphEl (morphdom.js:219:17)
    at morphdom.js:332:37
    at morphEl (morphdom.js:219:17)

How can I achieve exactly the same behavior as when using a CDN?
Do I need to install another module or something else?

Thanks!

[ekwoka]

Are you using a javascript bundler? like laravel mix

To use import in clientside JS you need to make the script tag type="module" and also use paths that can be resolved in the browser. from 'alpinejs' uses node module resolution to find the file, which won't work in the browser.

So you need to prebundle it or make sure the files all have proper web paths

[malogajski]

yes I'm using laravel mix. It's added to webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/alpine.js', 'public/js')

[ekwoka]

Oh, it looks like it's likely that morphdom or whatever is trying to access the global Alpine. You'll need to just add the line window.Alpine = Alpine

[malogajski]

first of all, thanks @ekwoka
Yes, I added this in the meantime, tested - same result.

[malogajski]

..Playing with downloaded library
(for testing purposes)

PhpStorm offers to download external libraries, which I did for Alpine
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

Then, I copied the content from that file and pasted it in public/alpine.js - Everything works, no errors.
Also to keep everything as is, I commented out the alpinejs line from laravel-mix (webpack.mix.js), so running npm run dev won't change alpine.js file.

I assume that something is missing in the building process..

Once again, this is just my check, not a final solution. Anyway, maybe this will help someone to understand my problem.