livewire: BUG: Livewire + Alpine entangle.defer

If you use entangle and defer in Alpine it causes an issue where every second submit is ignored by livewire. When doing this with a more complex form using arrays it causes the “Livewire encountered corrupt data when trying to hydrate the [‘x’] component. Ensure that the [name, id, data] of the Livewire component wasn’t tampered with between requests.” error

See video for example with requests in dev tools: https://www.youtube.com/watch?v=uJhY9Wv5KDw

Steps to reproduce:

Create component:

class Test extends Component
{
    public $testing;
    public function submit()
    {
    }

    public function render()
    {
        return view('livewire.test');
    }
}

View:

<div>
    <div x-data="{ testing:  @entangle('testing').defer }">
        <input type="text" x-model="testing">
        <p>Alpine: <span x-text="testing"></span></p>
        <p>Livewire: {{$testing}}</p>
        <button wire:click.prevent="submit">Submit</button>
    </div>
</div>

Then type a letter, click submit, type another click submit etc…

Removing defer works perfectly but sends a request with every keystroke

Context

Livewire version: 2.2.9
Laravel version: 8.8.0
Browser: Chrome

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 21 (18 by maintainers)

Most upvoted comments

@deanzod ok thanks, good to know. I’ve created a failing test in PR #1947 which replicates the issue.

I understand it can be concerning when trying to use this and it doesn’t work as expected, but keep in mind @entangle is a new feature as of Livewire 2 and as such isn’t fully battle tested.

But @calebporzio has been pretty amazing with his responses, getting a lot of these issues fixed quickly once he has a failing test.

I would recommend using your own watchers if your running something critical in production in the meantime.

Hope this helps! (And if it’s any consolation I’m also running this in production 😬)

joshhanley on Nov 1, 2020

Thanks @joshhanley for the PR. This has been fixed and is on master - will be tagged soon

calebporzio on Nov 2, 2020

@zepfietje I’ve included the exact code along with each video. First one there is no validation but it shows some sort of bug where at least 2 keypresses are needed in order for entangle to work on every other request.

The 2nd example is what triggered me to open the issue and when I wrote the most stripped down code (op) I spotted that issue. I am assuming they are related in some way but the validation error does seem to only be when using arrays. I’m thinking that if the first submit works, validation brings you back to the page. Changing the value and re-submitting gives some sort of mismatch due to the fact that livewire is not updating alongside alpine on every other request

deanzod on Oct 9, 2020

@zepfietje sorry - should show now

deanzod on Oct 9, 2020