Level 63
I never upgraded a Livewire 2 application to a Livewire 3 application.
I thought it was a better idea to recode the entire application to write a code compliant with Livewire 3.
Jul 27, 2024
9
Level 1
All Livewire components stopped working after upgrading to Livewire 3
I have an application with several Livewire components, after upgrading all of them stopped working, the views are rendered, but all wire:model are not working.
In the app.js file I have this:
import './bootstrap';
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
Livewire.start()
In this Livewire component I have several properties but I will show an example with 1
public $showEditModal = false;
In my view I am setting that variable with a wire:click
<button wire:click="edit({{ $brand->id }})" title="Edit"><i class="fa-solid fa-ellipsis-vertical"></i></button>
In the edit method I have this:
public function edit(Brand $brand)
{
...
$this->showEditModal = true;
}
And this should show a dialog that has this:
<x-modal.dialog wire:model="showEditModal" max-width="lg" id="modal-create-edit-brands">
The strange part is when I click the button I get these errors:
Uncaught TypeError: Cannot read properties of undefined (reading 'entangle')
at [Alpine] {
show: window.Livewire.find('R1VvPfrlDHTTPS6JtTUV').entangle('showImportModal').live,
} (eval at safeAsyncFunction (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1176:21), <anonymous>:4:59)
at http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1198:23
at tryCatch (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1118:14)
at evaluate (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1142:34)
at Function.<anonymous> (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:3547:17)
at flushHandlers (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1283:48)
at stopDeferring (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1288:7)
at deferHandlingDirectives (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1291:5)
at initTree (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1478:5)
at http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1916:7
[Alpine] {
show: window.Livewire.find('R1VvPfrlDHTTPS6JtTUV').entangle('showImportModal').live,
} @ VM7304:4
(anonymous) @ livewire.js?id=cc800bf4:1198
tryCatch @ livewire.js?id=cc800bf4:1118
evaluate @ livewire.js?id=cc800bf4:1142
(anonymous) @ livewire.js?id=cc800bf4:3547
flushHandlers @ livewire.js?id=cc800bf4:1283
stopDeferring @ livewire.js?id=cc800bf4:1288
deferHandlingDirectives @ livewire.js?id=cc800bf4:1291
initTree @ livewire.js?id=cc800bf4:1478
(anonymous) @ livewire.js?id=cc800bf4:1916
dontRegisterReactiveSideEffects @ livewire.js?id=cc800bf4:1955
cloneNode @ livewire.js?id=cc800bf4:1915
patch @ livewire.esm.js:6771
patchChildren @ livewire.esm.js:6937
patch @ livewire.esm.js:6785
patchChildren @ livewire.esm.js:6937
patch @ livewire.esm.js:6785
morph3 @ livewire.esm.js:6982
morph2 @ livewire.esm.js:9751
eval @ livewire.esm.js:9817
setTimeout
handleError @ livewire.js?id=cc800bf4:1128
(anonymous) @ livewire.js?id=cc800bf4:1198
Promise.catch
(anonymous) @ livewire.js?id=cc800bf4:1198
tryCatch @ livewire.js?id=cc800bf4:1118
evaluate @ livewire.js?id=cc800bf4:1142
(anonymous) @ livewire.js?id=cc800bf4:3547
flushHandlers @ livewire.js?id=cc800bf4:1283
stopDeferring @ livewire.js?id=cc800bf4:1288
deferHandlingDirectives @ livewire.js?id=cc800bf4:1291
initTree @ livewire.js?id=cc800bf4:1478
(anonymous) @ livewire.js?id=cc800bf4:1916
dontRegisterReactiveSideEffects @ livewire.js?id=cc800bf4:1955
cloneNode @ livewire.js?id=cc800bf4:1915
patch @ livewire.esm.js:6771
patchChildren @ livewire.esm.js:6937
patch @ livewire.esm.js:6785
patchChildren @ livewire.esm.js:6937
patch @ livewire.esm.js:6785
morph3 @ livewire.esm.js:6982
morph2 @ livewire.esm.js:9751
eval @ livewire.esm.js:9817Understand this error
livewire.js?id=cc800bf4:1129 Uncaught TypeError: Cannot read properties of undefined (reading 'entangle')
at [Alpine] {
show: window.Livewire.find('R1VvPfrlDHTTPS6JtTUV').entangle('showDeleteModal'),
} (eval at safeAsyncFunction (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1176:21), <anonymous>:4:59)
at http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1198:23
at tryCatch (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1118:14)
at evaluate (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1142:34)
at Function.<anonymous> (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:3547:17)
at flushHandlers (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1283:48)
at stopDeferring (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1288:7)
at deferHandlingDirectives (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1291:5)
at initTree (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1478:5)
at http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1916:7
[Alpine] {
show: window.Livewire.find('R1VvPfrlDHTTPS6JtTUV').entangle('showDeleteModal'),
} @ VM7307:4
(anonymous) @ livewire.js?id=cc800bf4:1198
tryCatch @ livewire.js?id=cc800bf4:1118
evaluate @ livewire.js?id=cc800bf4:1142
(anonymous) @ livewire.js?id=cc800bf4:3547
flushHandlers @ livewire.js?id=cc800bf4:1283
stopDeferring @ livewire.js?id=cc800bf4:1288
deferHandlingDirectives @ livewire.js?id=cc800bf4:1291
initTree @ livewire.js?id=cc800bf4:1478
(anonymous) @ livewire.js?id=cc800bf4:1916
dontRegisterReactiveSideEffects @ livewire.js?id=cc800bf4:1955
cloneNode @ livewire.js?id=cc800bf4:1915
patch @ livewire.esm.js:6771
patchChildren @ livewire.esm.js:6937
patch @ livewire.esm.js:6785
patchChildren @ livewire.esm.js:6937
patch @ livewire.esm.js:6785
morph3 @ livewire.esm.js:6982
morph2 @ livewire.esm.js:9751
eval @ livewire.esm.js:9817
setTimeout
handleError @ livewire.js?id=cc800bf4:1128
(anonymous) @ livewire.js?id=cc800bf4:1198
Promise.catch
(anonymous) @ livewire.js?id=cc800bf4:1198
tryCatch @ livewire.js?id=cc800bf4:1118
evaluate @ livewire.js?id=cc800bf4:1142
(anonymous) @ livewire.js?id=cc800bf4:3547
flushHandlers @ livewire.js?id=cc800bf4:1283
stopDeferring @ livewire.js?id=cc800bf4:1288
deferHandlingDirectives @ livewire.js?id=cc800bf4:1291
initTree @ livewire.js?id=cc800bf4:1478
(anonymous) @ livewire.js?id=cc800bf4:1916
dontRegisterReactiveSideEffects @ livewire.js?id=cc800bf4:1955
cloneNode @ livewire.js?id=cc800bf4:1915
patch @ livewire.esm.js:6771
patchChildren @ livewire.esm.js:6937
patch @ livewire.esm.js:6785
patchChildren @ livewire.esm.js:6937
patch @ livewire.esm.js:6785
morph3 @ livewire.esm.js:6982
morph2 @ livewire.esm.js:9751
eval @ livewire.esm.js:9817Understand this error
livewire.js?id=cc800bf4:1129 Uncaught TypeError: Cannot read properties of undefined (reading 'entangle')
at [Alpine] {
show: window.Livewire.find('R1VvPfrlDHTTPS6JtTUV').entangle('showUpdateModal').live,
} (eval at safeAsyncFunction (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1176:21), <anonymous>:4:59)
at http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1198:23
at tryCatch (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1118:14)
at evaluate (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1142:34)
at Function.<anonymous> (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:3547:17)
at flushHandlers (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1283:48)
at stopDeferring (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1288:7)
at deferHandlingDirectives (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1291:5)
at initTree (http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1478:5)
at http://grupocengall.dev_3.2.com/livewire/livewire.js?id=cc800bf4:1916:7
That are related to other modals but those variables were not set anywhere in the edit method.
For other Livewire component properties that I use for example in an input field like this:
<x-input.text wire:model.live="profile.name" id="createName" placeholder="Name(s)"/>
They remain blank
Since I have been using those Livewire components as full page components, I created the routes like this:
Route::view('/dashboard/vehicles/brands', 'pages.dashboard.vehicles.brands')->name('dashboardVehiclesBrands');
The view is rendered, but all public properties are not linked to the view
Am I missing something? I saw similar issues but the answers in those topics were to remove the lines:
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
Which I do not have in my app.js so I thought might be a different issue
Another example, I have a blade component, originally like this:
<div class="d-flex justify-content-center align-items-center">
{{ $slot }}
<div x-data="{ focused: false }">
<span class="ms-4 rounded-3">
<input @focus="focused = true" @blur="focused = false" class="sr-only" type="file" {{ $attributes }}>
<label for="{{ $attributes['id'] }}" :class="{ 'border-primary': focused }" class="py-2 px-3 rounded-3 border">
Selecciona un archivo
</label>
</span>
</div>
</div>
I have tried to replace the @blur and @focus with x-on:blur and x-on:focus:
<div class="d-flex justify-content-center align-items-center">
{{ $slot }}
<div x-data="{ focused: false }">
<span class="ms-4 rounded-3">
<input x-on:focus="focused = true" x-on:blur="focused = false" class="sr-only" type="file" {{ $attributes }}>
<label for="{{ $attributes['id'] }}" :class="{ 'border-primary': focused }" class="py-2 px-3 rounded-3 border">
Selecciona un archivo
</label>
</span>
</div>
</div>
But in the console I the following error:
ReferenceError: messages is not defined
I am not sure if I have one problem creating everything or if there are several issues after upgrading
Level 51
@vincent15000 No, I've upgraded from Livewire 2 to 3 before and the process was straightforward.
1 like
Level 51
You need to add Livewire scripts in the right way.
<html>
<head>
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>
And make sure AlpineJS isn't installed, Livewire will inject it.
1 like
Level 63
@MohamedTammam No ... he has upgraded, so he needs to remove @livewireStyles and @livewireScripts.
Furthermore if he is using AlpineJS, he needs to remove the alpine package which comes directly with Livewire 3.
Level 51
No ... he has upgraded, so he needs to remove
@livewireStylesand@livewireScripts
Why?
1 like
Level 63
@MohamedTammam With version 3, you don't need to declare styles and scripts anymore, it's done under the hood.
1 like
Level 51
@vincent15000 Yeah, but if you want to use AlpineJS in a page without Livewire you need add it :D
Level 1
@MohamedTammam Actually I have tried with both, but I am using Alpine so I need to use @llivewireScriptConfig according to the documentation.
Level 1
I have found that Livewire 3 doesn't work well with laravel-webpack and it seems is part of the reason the components are not working because the target is not correct. Alpine bug report.
And even if I try to configure it, many es are not supported in webpack, for example:
mix.webpackConfig({
target: ['es2017']
});
After changing to Vite, the bundle is loaded properly and Livewire works in most of the components, there are some that still doesn't work but I've figured out that is because I have some properties with the same name as the methods (Which was working in Livewire 2)
Duplicate method and property names PHP allows you to use the same name for both a class property and method. In Livewire 3, this will cause problems when calling methods from the frontend via wire:click.
So now I am testing all the application and finding which methods collide with a property name and refactoring
The root cause of this issue seems to be that laravel-webpack does not load the bundle correctly due to the target.
Please or to participate in this conversation.