Issues after updating to Livewire 3

RobHowdle commented 7 months ago

Describe the bug After upgrading to Livewire 3, I'm getting a bunch of errors saying things aren't defined. I've gone back through the installation steps ensuring I've followed them and from what I can see everything is right. Below is screenshot of my console errors.

To Reproduce Unsure how to reproduce. Just simply updated my livewire to version 3 and this is the only thing not working now

Expected behavior I'd expect it load what it needs to after following the installation instructions

Screenshots or Videos If applicable, add screenshots or videos to help explain your problem.

Dependencies

WireUI Version: 1.18.1
Laravel Version: 10.10
Alpine.js Version: 3.13.0
Livewire Version: 3.0
Lang: en_US

Desktop (If applicable, please complete the following information):

OS: Mac OSX
Browser: Brave (chrome)
Version 1.58.127

Smartphone (If applicable, please complete the following information):

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

Additional context I had noticed that after upgrading, alpine was being called in my app.js file. I did some googling and found that having it called in multiple places can cause the issue so I removed it from the app.js file which didn't work. I then tried to do it the other way and only start it in the app.js file but that didn't work either. Quite confused where I'm going wrong

dwainscheeren commented 7 months ago

I have the same issue with livewire v3. This is my layout file

<html>
<head>
    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <!-- Styles -->
    @livewireStyles
</head>

<body>
                <!-- Page Content -->
                <main class="p-4 sm:p-6 flex-1">
                    {{ $slot }}
                    @yield('content')
                </main>

    @stack('modals')

    @wireUiScripts
    @livewire('wire-elements-modal')

    @livewireScriptConfig
    <x-notifications z-index="z-50" />
    <x-dialog z-index="z-50" blur="md" align="center" />
</body>

rahmani-djamel commented 7 months ago

same issue here for date picker

RobHowdle commented 7 months ago

I have the same issue with livewire v3. This is my layout file

<html>
<head>
    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <!-- Styles -->
    @livewireStyles
</head>

<body>
                <!-- Page Content -->
                <main class="p-4 sm:p-6 flex-1">
                    {{ $slot }}
                    @yield('content')
                </main>

    @stack('modals')

    @wireUiScripts
    @livewire('wire-elements-modal')

    @livewireScriptConfig
    <x-notifications z-index="z-50" />
    <x-dialog z-index="z-50" blur="md" align="center" />
</body>

I believe the documentation said the wireUiScripts should go at the bottom of the header - https://livewire-wireui.com/docs/get-started#installation

souinhua commented 7 months ago

Is there a fix about this already?

I have tried moving things already.

I also tried to add <script defer in for both vite and Livewire scripts, but to nothing worked.

<head>
  // .... metas here

  @wireUiScripts
  @vite(['resources/sass/app.scss', 'resources/js/app.js'])
  @livewireStyles
  @livewireScripts
</head>

souinhua commented 7 months ago

Guys, just remove AlpineJs from your app.js because Livewire 3 has Alpine in it and it is injected through @livewireScripts

import './bootstrap'
import Alpine from 'alpinejs'
import Chart from 'chart.js/auto'

window.Chart = Chart

window.Alpine = Alpine
Alpine.start()

into this

import './bootstrap'
import Chart from 'chart.js/auto'

window.Chart = Chart

KevinEscobarV commented 2 months ago

I have the same problem Not when the component is mainly loaded, but when the value is changed from a livewire event

wireui / wireui

Issues after updating to Livewire 3 #729