Vite Compiler has Problems in Laravel Echo

[grappetite-tahir]

In latest laravel they changed it from webpack to vite to compile the assets (js/css) I'm getting error about Echo is not defined in my browser console

I included the resources like this @vite(['resources/css/app.css', 'resources/js/app.js'])

This is my a little testing script before the

tag

<script>
            Echo.channel('home').listen('NewMessage', (e) => {
                console.log(e.message);
            })
</script>

This is my bootstrap.js snipped for pusher and echo

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']
    // enabledTransports: ['ws', 'wss'],
});

Here it is my package.json content

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^0.27",
        "laravel-vite-plugin": "^0.5.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^3.0.0"
    },
    "dependencies": {
        "laravel-echo": "^1.13.0",
        "pusher-js": "^7.3.0"
    }
}

[schonhoff]

Hi,

I had a similar problem with axios. Try out to set the inline script to

<script type="module">
            Echo.channel('home').listen('NewMessage', (e) => {
                console.log(e.message);
            })
</script>

That helped me in my case. Maybe it will help you, too. Here is the Tweet conversation between Jess Archer (a Laravel maintainer) and me: https://twitter.com/elelalem_ashraf/status/1543701867036905472

[grappetite-tahir]

<script type="module">

Hi @schonhoff,

Thank you so much for your response and yeah it resolved my problem. This type="module" in script tag done the trick. Cheers

[Mihir-bhuva]

try window.Echo insted of only Echo