Failed to connect to websocket

Question

I need your help...I've basically exhausted all the link proposed by Google :D And nothing help me pinpoint the problem...hence the fix.

If I use the command: npm run dev, I have the following error in the browser console (the page is nonetheless displayed...it just take longer)

enter image description here

The error does not appear with the: npm run build.

I`m using the following .env config

APP_NAME=App
APP_ENV=local
APP_KEY=*censored*
APP_DEBUG=true
APP_URL=https://app.dev

and .vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Laragon is launched with following environment enter image description here

Thank you !! LN

I saw that it might be due to SSL and that I might need to install a self-serving certificate module...but I did not see clear instructions so for now I have not try this piste

Answer 1

I realize this question is from November, but if you or other visitors from Google are having this issue, my solution was to update my vite.config.js:

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
    ],
    server: {
        hmr: {
            host: "localhost",
            protocol: "ws",
        },
    },
});

I'm using valet secure to host my test site. Falling-back to ws instead of wss, and specifying localhost (Firefox and other browsers permit CORS to this location) fixed live reload, and things are working normally again.