Correct implementation Livewire

Currently, I am using Livewire in a few projects.
I’ve been using Livewire since the release of V2 in Laravel and I was stoked when I heard about the possibility of using this in a Sage theme.

So I got started.

The way I made it working so far is by just installing Livewire into the Roots theme and putting the @livewireStyles and the @livewireScripts in the app.blade.php.

Locally, this works perfectly.

Eventually, when I wanted to deploy it to either a staging/production environment, Livewire stopped working.

It throws a 404 not finding the Livewire assets:
/livewire/livewire.min.js?id=cc800bf4 net::ERR_ABORTED 404 (Not Found)

So I debugged for some time, tried a lot of things.

So I tried some things like:

  • Changed @livewireScripts to @livewireScriptConfig. Tweaked the livewire.php config file. Made the error in the console go away, but Livewire still doesn’t work.
  • Trial and errors with inject_assets

FIX?

In the app.blade.php just using the @livewireStyles & @livewireScripts helpers.

In app.js:

import { Livewire } from '../../vendor/livewire/livewire/dist/livewire.esm.js';
Livewire.start()

This works both locally and on staging/production environments.

The only thing that arises now is that it throws:

livewire.esm.js:5006 Uncaught TypeError: Cannot redefine property: $persist
    at Function.defineProperty (<anonymous>)
    at src_default (livewire.esm.js:5006:14)
    at eval (livewire.esm.js:2773:32)
    at Array.forEach (<anonymous>)
    at Object.plugin (livewire.esm.js:2773:17)
    at Object.start (livewire.esm.js:9542:28)
    at HTMLDocument.eval (livewire.esm.js:10854:15)

It’s good that I got it working, but this is just a temporarily fix.

Since this is also pretty new to Sage, there isn’t that much to find about it.
And the article about Using Livewire with WordPress should be enough.

Has anyone found a way to make Livewire work both locally and on staging/production environments, and without any console errors?

1 Like

Hey @GamendeBrian,

I ran into this very issue a few days ago also and basically had the same solution as you.

The Livewire documentation does flag it can run into issues with custom nginx configurations which was what was happening to me on my production server. Is your prod server nginx too?

I was able to get this working and not get the $persist console error by doing everything you done above and by setting 'inject_assets' => false, in the Livewire config.

Did you remember to take the following out of your setup.php file?

add_filter('wp_footer', function () {
    echo Blade::render('@livewireScripts');
});

I ran into a CSRF issue with my solution for some reason and had to add <meta name="csrf-token" content="{{ csrf_token() }}"> to the app.blade.php file.

Hope this helps.

1 Like

If you are running your site on Nginx, you may need to add the following to your configuration file:

location ^~ /livewire/ {
  try_files $uri $uri/ /index.php?$query_string;
}

In some rare cases where that is not enough, removing js from a location block may solve the issue as well, for example:

location ~* ^.+\.(css|jpg|jpeg|gif|png|ico|gz|svg|svgz|ttf|otf|woff|woff2|eot|mp4|ogg|ogv|webm|webp|zip|swf|map)$ { #originally css|js|jpg...
    # WordPress Multisite Subdirectory
    rewrite ^/[_0-9a-zA-Z-]+(/wp-.*) $1 break;
    rewrite ^/[_0-9a-zA-Z-]+(/.*\.php)$ $1 break;
    add_header Access-Control-Allow-Origin "*";
    expires max;
    access_log off;
  }
1 Like