vite-plugin: Windows - Failed to load when loading vite dev server resources

I’m concerned about setting localhost in the hot file because on some machines this resolves to the IPv6 version (::1) and Docker doesn’t always listen on IPv6.

We could potentially set it to 127.0.0.1 to guarantee IPv4.

However, forcing a local address in the hot file would make things even harder if wanted to get sail share working with the Vite dev server.

There is maybe another option…

Vite allows you to configure where the client should look for the HMR server, using server.hmr. The Laravel Vite plugin should probably respect this, if set.

Would you mind testing against this branch?

https://github.com/laravel/vite-plugin/tree/use-hmr-host-when-set

I think you’ll want to set this in your vite.config.js (leaving server.host unset):

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

This worked for me:

docker-compose run --rm --publish 5173:5173 npm run dev -- --host

@mariom9267 , did you try below?

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

Tested in Laravel 10 with Vite on default port. Add this section to vite.config.js

    server: {
        host: '0.0.0.0',
        hmr: {
            clientPort: 5173,
            host: 'localhost',
        },
    }

Dear, I have a similar issue and am using Laravel Sail for my application. I attempted the suggested fixes, but my application is still running at host http://0.0.0.0:5173.

@shoeyn, @jessarcher, @pamitvn. I Found another simple but temporary solution, but it changed after your file changed 😭

Inside public/hot, change from

http://0.0.0.0:5173

to

http://localhost:5173

@RomanSarvarov in addition, can you try using the --host or --host 0.0.0.0 option when launching the Vite dev server?

Guys, does this issue relate to my problem? I downloaded “use-hmr-host-when-set” branch files, then compile it by running run npm run build and then replaced node_modules\laravel-vite-plugin\dist with compiled files.

So then I run npm run dev inside my docker container and trying to fetch http://localhost:3000/@vite/client from my browser I have connection refused.

My vite config:

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

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

My docker-compose.yml:

version: '3'

networks:
  laravel:
    driver: bridge

services:
  php:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: php
    restart: unless-stopped
    tty: true
    volumes:
      - ./src:/var/www/html
    ports:
      - "9000:9000"
    networks:
      - laravel
      
  nginx:
    image: nginx:stable-alpine
    container_name: nginx
    ports:
      - "80:80"
    volumes:
      - ./src:/var/www/html
      - ./conf/nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - php
      - pgsql
      - redis
    networks:
      - laravel

  pgsql:
    image: postgres:14
    container_name: postgres
    restart: unless-stopped
    tty: true
    ports:
      - "5432:5432"
    environment:
      POSTGRES_DB: farmweb
      POSTGRES_USER: farmweb
      POSTGRES_PASSWORD: secret
      PGPASSWORD: secret
      SERVICE_TAGS: dev
      SERVICE_NAME: postgresql
    networks:
      - laravel
      
  composer:
    image: composer:latest
    container_name: composer
    volumes:
      - ./src:/var/www/html
    working_dir: /var/www/html
    depends_on:
      - php
    networks:
      - laravel

  npm:
    image: node:16
    container_name: npm
    volumes:
      - ./src:/var/www/html
    ports:
      - "3000:3000"
    working_dir: /var/www/html
    entrypoint: ['npm']

  artisan:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: artisan
    volumes:
      - ./src:/var/www/html
    depends_on:
      - php
      - pgsql
    working_dir: /var/www/html
    entrypoint: ['php', '/var/www/html/artisan']
    networks:
      - laravel

  redis:
    image: redis:7-alpine
    container_name: redis
    restart: unless-stopped
    tty: true
    ports:
    - "6379:6379"
    networks:
      - laravel

Windows WSL2.

I spent more than 5 hours solving this problem, but I cant 😦

Thanks so much for testing this @shoeyn! I’m glad we’ve found a way to support it!

I’ve opened a PR for the branch at https://github.com/laravel/vite-plugin/pull/42

We will continue to refine this as more feedback comes in. Ultimately I’d prefer if it “just worked” for you without a config option.

Im having problems with vite inside a docker container. I hope anyone knows a solution because all the topics i found related to this are not the solution. Im on WSL2, Ubuntu20.

The vite server isnt responding http://[::]:5173 in the public/hot file.

This is my command: docker-compose run --rm --service-ports npm run dev – --host

This is my vite config:

import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/fa/all.min.js'
            ],
            refresh: true,
            server: {
                hmr: {
                    host: 'localhost',
                },
            }
        }),
    ],
});

If i change the hotfile to http://localhost: it all works untill i have to restart npm run dev, really annoying 😦

GET http://[::]:5173/@vite/client net::ERR_ADDRESS_INVALID
index:64          GET http://[::]:5173/resources/css/app.css net::ERR_ADDRESS_INVALID
index:64          GET http://[::]:5173/resources/js/app.js net::ERR_ADDRESS_INVALID
index:64          GET http://[::]:5173/resources/js/fa/all.min.js net::ERR_ADDRESS_INVALID`

i think you have some wrong configuration as server key is not part of laravel() plugin you must take it after plugins key like this

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/fa/all.min.js'
            ],
            refresh: true,
        }),
    ],
    server: {
        hmr: {
            host: 'localhost',
        },
    }
});

I think you’ll want to set this in your vite.config.js (leaving server.host unset):

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

Thanks, it saved my day!!!

Hi @shoeyn,

As a first step, I have created https://github.com/laravel/vite-plugin/pull/30 that will allow you to customise the server.host value when running inside Sail.

As noted above, you won’t be able to just set it to localhost because then the Vite server will only listen on localhost inside the container.

You would need to configure it in your vite.config.js something like this:

server: {
    host: process.env.LARAVEL_SAIL ? Object.values(os.networkInterfaces()).flat().find(info => info?.internal === false)?.address : undefined,
}

or, a simpler, but potentially more fragile option:

server: {
    host: os.networkInterfaces().eth0?.[0].address,
}

Adding

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

worked for me. Thanks @jessarcher

I understand the suffering, but sometimes it is necessary to get used to new things, it is something that defines us as human beings. But try that from the file, hot worked for me in WSL2 on Windows

Not working on Laravel Sail (with the 5173 port mapped) through WSL.

vite.config.js:

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

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

docker-compose.yml:

version: '3'
services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.1
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.1/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
            - redis
    mysql:
        image: 'mysql/mysql-server:8.0'
        ports:
            - '${FORWARD_DB_PORT:-3306}:3306'
        environment:
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ROOT_HOST: "%"
            MYSQL_DATABASE: '${DB_DATABASE}'
            MYSQL_USER: '${DB_USERNAME}'
            MYSQL_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ALLOW_EMPTY_PASSWORD: 1
        volumes:
            - 'sail-mysql:/var/lib/mysql'
            - './vendor/laravel/sail/database/mysql/create-testing-database.sh:/docker-entrypoint-initdb.d/10-create-testing-database.sh'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "mysqladmin", "ping", "-p${DB_PASSWORD}"]
            retries: 3
            timeout: 5s
    redis:
        image: 'redis:alpine'
        ports:
            - '${FORWARD_REDIS_PORT:-6379}:6379'
        volumes:
            - 'sail-redis:/data'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "redis-cli", "ping"]
            retries: 3
            timeout: 5s
networks:
    sail:
        driver: bridge
volumes:
    sail-mysql:
        driver: local
    sail-redis:
        driver: local

Errors (running npm run dev inside container):

GET http://[::]:5173/@vite/client net::ERR_ADDRESS_INVALID
GET http://[::]:5173/resources/js/app.js net::ERR_ADDRESS_INVALID

@RomanSarvarov have a look at #40

Not sure. My app_url is http://localhost and I have Connection Refused error, instead of 404 that I see in #40 issue.

@jessarcher Works perfectly using that branch while setting the hmr host