Laravel / Livewire does not work in laravel mix complied app.js

user_12887245 0
Viewed 2102

I use Laravel with Livewire. I wanted to react to an event in js. Once its emitted, an js alert should appear. The problem seems to be in app.js were I have my js function. I receive an error, Livewire is not available. I use Laravel Mix to compile it, and it compiles all fine.

Error: Uncaught TypeError: Livewire.on is not a function

app.js:

import Livewire from '../../vendor/livewire/livewire/dist/livewire'; 
Livewire.on('testEvent', function () {
  alert("test");
});

It looks like an import problem. I've removed the package and tried it again and I also thought its a timing problem, so I executed on document load but still the same problem. I've then decided to push it directly to the stack through a components blade file, and here it works all fine.

@push('scripts')
<script>
   Livewire.on('testEvent', function () {
   alert("test");
   });
</script>
@endpush

Pushing it to the stack should not be required as I've seen other code snippets without it and the error seems to be a simple import problem?

laravel-livewire addeventlistener event-handling javascript
2 Answers

Use the browser Inspector and look if @livewireStyles and @livewireScripts are loaded in page. Be sure that Livewire already is installed

user_148806560

Please note that there are some js codes which @livewireScripts puts after the actual livewire.js file. so ...

  1. make sure loading Livewire inside global window object for later accesses.
window.Livewire = require("../../public/vendor/livewire/livewire.js");`
  1. create a new file called livewire.js with these lines
if (window.livewire) {
    console.warn(
        "Livewire: It looks like Livewire's @livewireScripts JavaScript assets have already been loaded. Make sure you aren't loading them twice."
    );
}

window.livewire = new window.Livewire();
window.livewire.devTools(true);
window.Livewire = window.livewire;
window.livewire_app_url = "";
window.livewire_token = "ZgcGN7YWdBf2wfwJQoDJ3pUHfwhBmAAlSoeBpQXD";

/* Make sure Livewire loads first. */
if (window.Alpine) {
    /* Defer showing the warning so it doesn't get buried under downstream errors. */
    document.addEventListener("DOMContentLoaded", function () {
        setTimeout(function () {
            console.warn(
                "Livewire: It looks like AlpineJS has already been loaded. Make sure Livewire's scripts are loaded before Alpine.\\n\\n Reference docs for more info: http://laravel-livewire.com/docs/alpine-js"
            );
        });
    });
}

/* Make Alpine wait until Livewire is finished rendering to do its thing. */
window.deferLoadingAlpine = function (callback) {
    window.addEventListener("livewire:load", function () {
        callback();
    });
};

let started = false;

window.addEventListener("alpine:initializing", function () {
    if (!started) {
        window.livewire.start();

        started = true;
    }
});

document.addEventListener("DOMContentLoaded", function () {
    if (!started) {
        window.livewire.start();

        started = true;
    }
});

Make sure you are using the latest version of livewire and use your own updated version of @livewireScripts js codes which automatically gets appended after the actual livewire.js script tag.

user_65435070
Related