Livewire encountered corrupt data when trying to hydrate the … component

Question

I am getting the following error and am a bit lost on it:

Livewire encountered corrupt data when trying to hydrate the … component. Ensure that the [name, id, data] of the Livewire component wasn’t tampered with between requests

Situation is as follows: Livewire 2.x, Laravel 7.x, Component Controller fetches data from 3 MySQL Stored Procedures and processes it. Component Blade is a pretty basic blade with foreach loop. I am using the wire:init feature so that the component is not blocking the page load. It contains a custom-built pagination. When switching to the second page of data, this error occurs. It did not error out while on Livewire 1.x.

Has anyone any idea on how to tackle this problem? The error itself does not speak much to me. Any additional info required?

Thank you in advance, appreciate any help!

Answer 1

In my case the solution was to make a public property protected and pass it to the blade manually, so it was excluded from Livewire's auto-handling under the hood.

Answer 2

To troubleshoot this open the vendor/livewire/livewire/src/ComponentChecksumManager.php file and add var_dump($stringForHashing); on line 19, just before the return statement. Then you can see the data that is being hashed and compare it to the previous hashed data to find the discrepancies.

After I did this I was able to identify the numeric keys that javascript was re-arranging and come up with an adequate fix.

One thing to note is that some json formatters will re-order numeric keys also, so it's better to compare the json without formatting it or format it manually.

Edit: Using var_dump can interfere with the functionality on some pages, so writing the data to a file might be a better option:

file_put_contents('/path/to/log.txt', $stringForHashing . "\n\n", FILE_APPEND);

Answer 3

For what it worth, our issue was a very large integer, larger than what javascript can handle through Number.MAX_SAFE_INTEGER.

We filled a bug report here: https://github.com/livewire/livewire/discussions/4788 (livewire 2.10.4).

So, no solution for the bug itself when using too large integer. If you want to treat your value as a real integer you’re in no luck for now, but maybe casting to string could work for you. (and/or do your computations on the php side – with protected property – if it’s doable in your case).

That being said, the real cause of our problem was an uuid casted to int because we did not filled the protected $keyType = 'string'; of our laravel model (https://laravel.com/docs/9.x/eloquent#primary-keys)!