I recently started working with Docker, and I came across this issue:

The way I resolved it was:

Instead of running "sail run dev" in my terminal, I took a more Docker-based service approach.

1. I created the "vite" service in Docker Compose ( docker-compose.yaml or compose.yaml file)

    services:
        laravel.test:
            build:
                context: './vendor/laravel/sail/runtimes/8.5'
                dockerfile: Dockerfile
                args:
                    WWWGROUP: '${WWWGROUP}'
            image: 'sail-8.5/app'
            restart: unless-stopped
            extra_hosts:
                - 'host.docker.internal:host-gateway'
            ports:  
                - '${APP_PORT:-80}:80'
                #- '${VITE_PORT:-5173}:${VITE_PORT:-5173}'  #remove this to avoid port in use error
   
    	/** ... rest of your config ...*/
   
    	## Vite Service run in development mode. run: "sail --profile dev up -d" to start  ##
        vite:
            image: 'node:20-alpine'
            working_dir: /var/www/html
            volumes:
                - '.:/var/www/html'
            ports:
                - '${VITE_PORT}:${VITE_PORT}'   #  port is defined in your .env as VITE_PORT=5713
            command: sh -c "npm install && npm run dev -- --host"
            networks:
                - sail
            profiles:
            - dev
   

2. Open your vite.config.js and update your config to these parameters:

    import {defineConfig, loadEnv} from 'vite';
   
    export default({mode}) => {
        process.env = {...process.env, ...loadEnv(mode, process.cwd())}
   
        return defineConfig({
   
            // allows you to customize the build environment
            server: {
                host: process.env.VITE_HOST, // CRITICAL
                cors: true,
                port: process.env.VITE_PORT,
                watch: {
                    usePolling: true, // important for WSL/Docker
                },
                hmr: {
                    host: process.env.VITE_HMR_HOST,
                    protocol: 'ws',
                    port: process.env.VITE_HMR_PORT, // ✅ REQUIRED
   
                },
            },
        });
    }
   

3. Open you .env and add the configs to it

    VITE_PORT=2123   # any port of your choice just make sure it is free
    VITE_HOST=0.0.0.0
    VITE_HMR_HOST=127.0.0.1  # here you can use your main domain name, e.g., example.local or leave as is
    VITE_HMR_PORT="${VITE_PORT}"
   

4 in your terminal run ./vendor/bin/sail --profile dev up -d --build

5. Please note: running "sail down" doesn't delete/remove the vite service. you will have to delete/remove it manually if you need to delete it, so if you update any config relating to vite, you should delete it manually and recreate it

This config assumes that you already have a working Laravel project in Docker and require only a working Vite