Livewire encountered corrupt data when trying to hydrate the … component

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!

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.

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.

i run following command then it solved

php artisan optimize