Problems with Laravel Echo and Vite

Hello I'm having an issue with Laravel Echo (and js packages in general), I get this error :

Uncaught ReferenceError: Echo is not defined

Here's my app.js :

import './bootstrap';

My bootstrap.js :

import _ from 'lodash';
window._ = _;

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

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,
    wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

And my view :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content={{ csrf_token() }}>
    <title>Websockets</title>
    @vite('resources/css/app.css')
</head>
<body>
    @vite('resources/js/app.js')
    <script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>
    <script>
        var uptime = @json($uptime);
            Echo.channel('uptime-checked.'+uptime.id)
                .listen('UptimeChecked', (e) => {
                    console.log(e.status);
                })
    </script>
</body>
</html>

Sinnbeck

3 years ago

Level 102

Try adding defer

<script defer >

KLassiux

3 years ago

Level 1

@Sinnbeck Thanks for your answer, still not working

thinkverse

3 years ago

Best Answer

Level 15

You need to use the newer type of module instead.

<script type="module">
    var uptime = @json($uptime);
        Echo.channel('uptime-checked.'+uptime.id)
            .listen('UptimeChecked', (e) => {
                console.log(e.status);
            })
</script>

10 likes

KLassiux

3 years ago

Level 1

@thinkverse Yes, it's working now, thanks !

kovax

3 years ago

Level 1

@thinkverse thanks it's working

Please or to participate in this conversation.