Level 102
That looks spot on :) Can you see if you can access Echo in the browser console ?
Nov 1, 2022
11
Level 4
Laravel Echo cannot be found [Vite]
I am having an issue where after migrating to vite from mix laravel echo does not seem to wrok properly.
I am getting the error: "Laravel Echo cannot be found" in the console. more so a warning actually. The connection does not come trough properly but I can see on laravel-websockets dashboard that there was an attempt.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
@vite(['resources/css/app.css'])
@vite(['resources/js/app.js'])
@livewireScripts
@livewireStyles
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/iziToast.min.js" defer></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
</head>
The JS is loaded BEFORE the livewireScripts. (Ive tried after aswell no difference..)
My bootstrap.js
import _ from 'lodash';
window._ = _;
import axios from 'axios';
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
window.Pusher = Pusher;
window.Echo = new Echo({
broadcaster: 'pusher',
key: import.meta.env.VITE_PUSHER_APP_KEY,
cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
wsHost: window.location.hostname,
wsPort: 6001,
wssPort: import.meta.env.VITE_PUSHER_APP_PORT,
disableStats: true,
enabledTransports: ['ws', 'wss'],
forceTLS: (import.meta.env.VITE_PUSHER_APP_SSL === 'true'),
encrypted: false,
});
Level 4
@Sinnbeck If i try Echo in the console I get the object created in the bootstrap.js with the correct information in it!
I did find out that if I add a console.log to bootstrap.js the Warning: Laravel Echo cannot be found is above the console log. This makes me believe that even tho the @vite is above the LivewireScripts, it is still loaded after LivewireScripts, am I missing something about how vite works?
Level 102
@ItsClassified Yeah something tells me that it loads the livewire scripts first, even though they are last. This can be due to the being vite script is being deferred. Try moving @livewireScripts to the end of body as shown in the docs
https://laravel-livewire.com/docs/2.x/installation#include-js
Level 4
@Sinnbeck Thanks again for your time.
I moved the @livewirescripts to the bottom, this does not change anything unfortunatly.
The warning is still before the "initialize" console log I placed in the bootstrap.js :(
Level 4
@Sinnbeck Okay so I got it working by removign the code from the bootstrap.js and placing it directly inside of the app.js. For some reason the bootstrap.js is loaded after everything else even tho it is imported at the top of the app.js...
I am no hero when it comes to JS but I never knew that importing a file does not wait for it to be imported haha.
Level 102
@ItsClassified It might be due to vite doing splitting so it loads it separately, which takes a split second (but might be too slow)
1 like
Level 4
@Sinnbeck Alrighty, thanks for you time.
Level 16
how about using window.onload like below
window.onload=function() { Echo.channel('posts') .listen('PostCreatedEvent', (e) => { console.log(e) showNotification(e) }); }
Level 10
I faced this error today and found solution below https://stackoverflow.com/questions/73472255/laravel-echo-echo-cannot-be-found
just move Echo above Alpine
import Echo from "laravel-echo";
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: 'us2',
forceTLS: true
});
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
3 likes
Level 1
@khalilmajdalawi Thank you very much ! for sharing that solution :) it actually solved the problem of the error: "Laravel echo cannot be found" although I never suspected Alpine.js being loaded before Laravel Echo to cause the issue here. Laravel Echo being not found initially was blocking my Livewire component to be able to listen to it.
1 like
Level 2
My issue was that I was that I didn't have "MIX_" pusher keys.
For example, I have PUSHER_APP_KEY but not MIX_PUSHER_APP_KEY.
Once I added MIX_PUSHER_APP_KEY & MIX_PUSHER_APP_CLUSTER, the errors stopped.
Please or to participate in this conversation.