Livewire 3 : Manually bundling Livewire and Alpine Not Working

app.js

import '../css/app.css';
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
 
// AlpineJS Plugins
import persist from "@alpinejs/persist"; 
import collapse from "@alpinejs/collapse";
import intersect from "@alpinejs/intersect";

// Global Store
import store from "./store";
// Breakpoints Store
import breakpoints from "./utils/breakpoints";

// Alpine Components
import usePopper from "./components/usePopper";
import accordionItem from "./components/accordionItem";


window.Alpine = Alpine;

Alpine.plugin(persist);
Alpine.plugin(collapse);
Alpine.plugin(intersect);

Alpine.store("breakpoints", breakpoints);
Alpine.store("global", store);

Alpine.data("usePopper", usePopper);
Alpine.data("accordionItem", accordionItem);

Livewire.start();

app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/ico" href="{{ asset('favicon.ico') }}" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ ($title ?? 'Home') .' | '. config('app.name') }}</title>
    
    @livewireStyles
    @vite('resources/js/app.js')

    @stack('head')
</head>
<body x-data="{}" x-bind="$store.global.documentBody">
    <div id="root" class="min-h-100vh flex grow bg-slate-50 dark:bg-navy-900" x-cloak>

        {{ $slot }}

    </div>
   {{-- @livewireScripts --}}
    @livewireScriptConfig
</body>
</html>

ERROR:

always loading
TypeError: Attempting to change the getter of an unconfigurable property. (Uncaught TypeError: Cannot redefine property: $persist, livewire.esm.js:4916)

when I'm change Livewire.start() to Alpine.start() - has been not loading, but Livewire not working and Alpine Expression Error: Can't find variable: currentlyReorderingStatus from global store variable.

vincent15000

2 years ago

Level 63

If you are using Livewire 3, you shouldn't install AplineJS manually because it's automatically added directly from Livewire.

medcharrafi

2 years ago

Best Answer

Level 48

remove all of plugins and the Alpinejs. start .... everything has come with Livewire 3 and u can use all of them, just if you have Livewire installed, you can check this : https://livewire.laravel.com/docs/installation#manually-bundling-livewire-and-alpine

personally recommended to inject livewire script manually in the layout.blade.php file you can check :

https://livewire.laravel.com/docs/alpine#manually-bundling-alpine-in-your-javascript-build

3 likes

pamungkarizall

2 years ago

Level 1

@medcharrafi now nothing error but css cannot load app.js

import '../css/app.css';
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';

// Global Store
import store from "./store";
// Breakpoints Store
import breakpoints from "./utils/breakpoints";

// Helper Functions
import * as helpers from "./utils/helpers";

window.Alpine = Alpine;
window.helpers = helpers;

Alpine.store("breakpoints", breakpoints);
Alpine.store("global", store);

Livewire.start();

1 like

Please or to participate in this conversation.