Correct implementation Livewire

sage
,
1

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
2

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
3

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
4

Hey @G-Hex,

Thanks for your help.

The inject_assets config property I also tried.

About the wp_footer filter, I didn’t use it.

And the CSRF-token problem I’ve come across before, but I already had that implemented.

From what I’ve debugged so far, is that, whenever I import the esm file in my app.js, the error is thrown.

So I’m not sure if that could be the problem itself.

5

Hey @JayLehtinen,

My site(s) are indeed running on Nginx.

Your solution did indeed work, I now I can use just @livewireStyles and @livewireScripts like in Laravel.

Thanks!

Side note:

When trying to use AlpineJS plugins, I haven’t found the proper way yet to work with this solution.

Tried it with this:

import { Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';

Alpine.plugin(intersect);
Alpine.start();

But then it throws errors in the console (obviously, because obviously Alpine is already running via Livewire).

See here:

image
image1104×184 32.3 KB

Still need to figure out how to fix this properly.
Probably with the Livewire config someway