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

score 14 · Answer 1 · answered Jan 02 '23 at 22:08

14

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.

answered Jan 02 '23 at 22:08

stephancasas

615
3
12

3

Hello @stephancasas,,,a big thanks ! I have no idea why, nor how. I tested this kind of config and it was not working...I tested it here following your reply...and it worked. =_= Thanks ! – LNFullStack Jan 07 '23 at 15:48
1

If, in your earlier config, you used `127.0.0.1` instead of `localhost`, that may have been part of the problem. IIRC, browsers permit `localhost` for receiving mixed content security, but will not permit `127.0.0.1`. Either way, I'm glad it's working for you! – stephancasas Jan 08 '23 at 00:11
this one solved my problem: https://stackoverflow.com/questions/70882663/vite-reload-loop – Xiaoqi Feb 02 '23 at 08:56

score 2 · Answer 2 · answered Nov 23 '22 at 18:57

It happened to me when I hosted it. My solution was to add :

server: {
    hmr: {
        host: 'localhost'
    }
}

To your vite.config.js file. So yours will be :

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,
                },
            },
        }),
    ],
});

The references can be found here and here

Thank you @Miretazam ! I think I tried but I'll check again as soon as I have access to my PC and let you know. It is appreciated :) — LNFullStack, Nov 24 '22 at 19:37
I can´t figure out how to make it work yet :/ ... I still got the error or another error by using this option. — LNFullStack, Dec 07 '22 at 22:53

Failed to connect to websocket

2 Answers2