Vite and Valet

Hi folks,

I've recently started a new project which has come with Vite. I've never managed to get it to work properly.

When I run npm run dev I get a web socket issue.

client.ts:78 WebSocket connection to 'wss://127.0.0.1:5173/' failed: 
setupWebSocket @ client.ts:78
client.ts:78 

[vite] failed to connect to websocket.
your current setup:
  (browser) 127.0.0.1:5173/ <--[HTTP]--> localhost:5173/ (server)

This issue exists in Firefox and Chrome and it means I have to stop and start the NPM command every time I make a change, clearly not ideal.

I've been Googling around for a couple of days to try and find a solution but nothing seems to resolve the issue. I have added server details to the vite config file but every time I do this results in a CORS issue. I feel like the problem is that Vite doesn't see itself and the Valet secured dev site as the same server, hence the CORS issue.

My vite.config file is

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

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: [
                // ...refreshPaths,
                // 'app/Http/**',
            ],
        }),


    ],

    // server: {
    //     https: true,
    //     hmr: {
    //         host: "comph.test",
    //         // protocol: "wss",
    //     },
    // },
});

I've purposely left comments in to show what I've tested.

Any pointers would be hugely appreciated!