The error:
Unable to call component method. Public method [toJSON] not found on component
is usually caused by a JavaScript call (often via Livewire or Alpine.js) trying to invoke a method named toJSON on your Livewire component, but no such public method exists on your PHP component class.
Why does this happen?
- Livewire tries to call a method on your component that doesn't exist.
- Sometimes, this can be triggered by JavaScript code that tries to serialize a Livewire component or its data, or by a naming conflict.
Why does removing @script fix it?
- The
@scriptdirective is not a standard Blade or Livewire directive. It's likely a custom directive (maybe from a package or your own macros). - If your
@scriptdirective is not defined or is defined differently on your two machines, it could cause Blade to render something unexpected, possibly interfering with Livewire's JavaScript.
How to fix:
-
Check your
@scriptdirective:- Make sure both machines have the same Blade macros or packages installed.
- If you use spatie/laravel-blade-javascript or similar, ensure it's installed and configured identically.
-
Check for
toJSONreferences:- Search your JavaScript for any code that might be calling
.toJSON()on a Livewire component or data object.
- Search your JavaScript for any code that might be calling
-
Check your Livewire component:
- Ensure you don't have any properties or methods named
toJSONthat are not public.
- Ensure you don't have any properties or methods named
-
Try using standard Blade script tags:
- Instead of
@script, use the standard Blade syntax:
<script> // your JS here </script>If this works, then the issue is with the
@scriptdirective. - Instead of
-
Synchronize your environments:
- Run
composer installandnpm installon both machines to ensure dependencies are identical. - Clear caches:
php artisan view:clear php artisan cache:clear php artisan config:clear php artisan route:clear - Run
Summary:
The root cause is likely that the @script directive is not defined or behaves differently on your main Mac, causing Blade to output something that breaks Livewire's JavaScript. Either define the directive properly or use standard <script> tags.
Example fix:
Replace:
@script
<script>
// your JS
</script>
@endscript
With:
<script>
// your JS
</script>
Or, if you want to use the @script directive, ensure it's registered in a service provider:
Blade::directive('script', function () {
return '<script>';
});
Blade::directive('endscript', function () {
return '</script>';
});
Final note:
Double-check your package versions and custom Blade directives on both machines. The error is not from Livewire itself, but from a mismatch or missing directive.
