Laravel Vite Issue

@Sinnbeck Figured it out.. it was my docker-compose.yml file that was missing:

${VITE_PORT:-5173}:${VITE_PORT:-5173}

Thanks for chiming in though :)

@connorm have same issue. Can you please show your docker-compose.yml?

@rsarvarov

# For more information: https://laravel.com/docs/sail
version: '3'
services:
  laravel.test:
    build:
      context: ./vendor/laravel/sail/runtimes/8.0
      dockerfile: Dockerfile
      args:
        WWWGROUP: '${WWWGROUP}'
        NODE_VERSION: '16'
    image: sail-8.0/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:
      - 'sailmysql:/var/lib/mysql'
    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:
      - 'sailredis:/data'
    networks:
      - sail
    healthcheck:
      test: [ "CMD", "redis-cli", "ping" ]
      retries: 3
      timeout: 5s
networks:
  sail:
    driver: bridge
volumes:
  sailmysql:
    driver: local
  sailredis:
    driver: local

@connorm Cannot make it work :( Can you help?

I have that docker-compose:

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

And I have default vite port in Laravel - 3000.

Where I need to put it?

@rsarvarov I have a similar local docker environment (seperate containers for php-fpm and nginx) and I too strungle to make vite.js dev server work :(

@iraklisg did you found a solution?

@rsarvarov if you are on windows, check out the links I posted below. It's a known issue and they are working on a fix

@Sinnbeck yup I'm on Windows (WSL2). I read #28 issue, but not sure that it's my case.

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

https://user-images.githubusercontent.com/27378369/176599295-9da72b2d-7774-4239-a8f1-351c1316a605.png

@rsarvarov What url is it showing in the npm run dev window? What urls are shown in the source of the webpage itself (the script tags)?

@Sinnbeck

 vite v2.9.13 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 7227ms.

In page source:

 http://localhost:3000/@vite/client
http://localhost:3000/resources/js/app.js

Both urls net::ERR_CONNECTION_REFUSED

@rsarvarov I just noticed that you have port 9000 open but not port 3000 ?

ports:
      - "9000:9000"
      - "3000:3000" //add me and rebuild

@Sinnbeck I run all npm commands inside NPM container =(

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

I opened port for that container.

@rsarvarov Ok good. Any change then?

@Sinnbeck I opened these ports yesterday, it didn't give any results. I'll try to ask help at vite plugin github page.

@Sinnbeck if I run:

docker-compose -f docker-compose.dev.yml run --publish 3000:3000 npm run dev

It now works! But idk why without "publush" docker don't open the port, even I specified it in docker-compose.yml

@rsarvarov Not sure. Did you remember to rebuild the container?

@Sinnbeck Yup, I do docker-compose -f docker-compose.dev.yml up -d --build

Thank you for help!

@rsarvarov Does it show the port as open if you do docker ps?

@Sinnbeck

docker-compose -f docker-compose.dev.yml run --publish 3000:3000 npm run dev

0.0.0.0:3000->3000/tcp

docker-compose -f docker-compose.dev.yml run npm run dev

<empty>

So strange. Might be that issue: https://github.com/docker/compose/issues/4799#issuecomment-623504144.

@rsarvarov Yeah I believe they have that built in to their vite integration IF you use sail

@rsarvarov Anyways. I am going to stop replying on this thread. Each time we reply @connorm with get an emai, and I dont want to spam them. The thread is also marked as solved. Feel free to create a fresh thread that you own

@renatoxm Mine looks the same - what errors are you seeing?

@connorm

Failed to load resource: net::ERR_ADDRESS_INVALID http : //0.0.0.0:5173/@vite/client

Failed to load resource: net::ERR_ADDRESS_INVALID http : //0.0.0.0:5173/resources/js/app.js

PS: i just spaced url above 'http : //' so I could post the error.

my Laravel Sail running like this:

 vite v2.9.13 dev server running at:
  > Local:    http : //localhost:5173/
  > Network:  http : //172.27.0.6:5173/
  ready in 299ms.
  Laravel v9.19.0
  > APP_URL: http : //localhost

testing this in chrome browser in

http : //localhost/

@renatoxm I know you said it's the same, but post your docker-compose.yml file.

 vite v2.9.13 dev server running at:
  > Local:    http : //localhost:5173/
  > Network:  http : //172.27.0.6:5173/
  ready in 299ms.
  Laravel v9.19.0
  > APP_URL: http : //localhost

running dev server with

./vendor/bin/sail npm run dev

production runs ok with

./vendor/bin/sail npm run build

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

@renatoxm Everything looks good to me.. you have @vite('resources/js/app.js') inside of you in app.blade.php?

@connorm yes... :-(

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Scripts -->
        @routes
        @vite('resources/js/app.js')
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

@renatoxm any chance you are using brave? It blocks vite for some reason and you need to allow it

@renatoxm i am not running docker but running it directly on amazon ec2.

" npm run build" for production was the solution here for a rather mystical problem which i explain now.

I was running a project with "sudo php artisan serve --host 0.0.0.0 --port 80" on a remote amazon server and wanted to access it via my local Browser on Windows. I ran "npm run dev" with and without "-- --host". Without host i had a "connection refused" on 127.0.0.1. No idea where 127.0.0.1 came from and how to ajust it and to what. With "-- --host" i got a "address invalid" with a cryptical URL of "http://[..]:5173" and thats it.

I wasnt aware i need to build the assets with "npm run build" and dont need a running "npm run dev". Access it either via "php artisan serve" or apache or whichever server serves pages.

@Sinnbeck I am experiencing the same issue. Would you know how to allow it on Brave?

@renatoxm brave is a browser :) just helped someone else today that had the exact same issue and it was due to the browser. Changing browser fixed it

@renatoxm At this point, I would start looking at the official Vite docs for potential WSL2 related hiccups/steps.

@connorm yes, doing exactly that. Thanks

@renatoxm do you have npm installed in Linux? If so, could you try starting the dev server there as a test?

@Sinnbeck yes... tried with no luck.

Also tried 'usePolling: true,':

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

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

and 'vite --host' at package.json

    "scripts": {
        "dev": "vite --host",
        "build": "vite build"
    },

always get the same error...

no luck until now :-(

@renatoxm Hello! I have the same issue, with the same setup: A new Sail install running on Docker spun up from WSL2

No solutions yet. Generating the scripts with sail npm run build works fine, so I know Vite works; it's just the server.

I spun down my project build and did a ping 0.0.0.0 and it returned the following:

PING 0.0.0.0 (127.0.0.1) 56(84) bytes of data.
64 bytes from 127.0.0.1: icmp_seq=1 ttl=64 time=0.016 ms
64 bytes from 127.0.0.1: icmp_seq=2 ttl=64 time=0.033 ms
64 bytes from 127.0.0.1: icmp_seq=3 ttl=64 time=0.031 ms
64 bytes from 127.0.0.1: icmp_seq=4 ttl=64 time=0.037 ms
64 bytes from 127.0.0.1: icmp_seq=5 ttl=64 time=0.033 ms
^C
--- 0.0.0.0 ping statistics ---
5 packets transmitted, 5 received, 0% packet loss, time 4177ms
rtt min/avg/max/mdev = 0.016/0.030/0.037/0.007 ms

So I know my machine is running a server at 0.0.0.0... I don't know what, though!

What a weird bug. I am frustrated!

@serge-benard 0.0.0.0 is "all traffic". But windows might send it to a different place (eg your router or something)

@renatoxm https://github.com/laravel/vite-plugin/issues/28

And https://github.com/laravel/vite-plugin/pull/42

@Sinnbeck no luck... just updated laravel-vite-plugin and tryed to add hmr.host, to defineConfig but no luck.

That's really frustrating

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

@renatoxm it's not tagged yet. What I've done in the meantime is downloaded the source of the vite-plugin, ran npm install in it and then ran npm run dev. Copied the contents of /dist to your /node_modules/laravel-vite-plugin/dist in your project.

Also, it seems like you need to add a new npm package on your project: npm install vite-plugin-full-reload --save-dev

After all that, npm run dev in Sail will properly generate the right URL (the one you set in server.hmr.host) and put it inside /public/hot so everything works when you go to http://localhost.

Fffeeeeeeeewwwwww

@Francismori7 PERFECT! Thank you.

Only one thing to change is npm run build in the second step. So recapping the current fix until it is tagged:

1 Clone the main branch at https://github.com/laravel/vite-plugin

2 run npm run build in it (not in your project, on a separate folder)

3 Copy the contents of /dist to your /node_modules/laravel-vite-plugin/dist in your project.

4 Run (in your project): npm install vite-plugin-full-reload --save-dev

5 Run npm run dev in Sail

6 Be happy!

Thanks again bro!

@RossAlexander This worked for me although I don't really have any shred of understanding why this works.

Many thanks for this 🥳

if @rossalexander 's solution is working for you, consider adding this to the root of your vite.config.js:

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

should do the magic trick and you don't have to update hot all the time

@ckalita Nice! Thanks for this! I was getting tired editing hot!

@RossAlexander Thanks for saving me. Only 3 hours lost, but it could have been a lot more!

I had the following. Default jetstream install with inertia. Php artisan serve --host running on a second machine on the local network. Vite server running on same second machine. Accessing site through browser on another machine on same local network. CORs errors no matter how much I changed the vite config although I didn't try that hmr object.

Couldn't work out what the [::] address was referring to in the browser requests and I see it's there in the public/hot file and figure straight away that it's the issue. I changed the [::] value to my second machine's internal IP on the local network (not localhost or 127.0.0.1 since I used npx vite --host to broadcast vite server over the network)

Anyway, thanks again

@ckalita Man, thanks so so much!! I have been working hours and hours trying to fix this f***** error. FINALLY!!

@RossAlexander Thanks bro. I Change the "hot" and also add the "server" in "vite.config.js"

@ckalita Thanks also, I did not have a hot file as my setup is similar to @z3nsh3ll - no Docker. I had added the server: { host:true } but my css was not being passed through tailiwind before being served. updating to the below with your solution worked;

server: {
        host: true,
        hmr: {
            host: '192.168.0.154'
        }
    }

@lsblsb Please create a new thread

@warmwhisky you're not the only one who feels this way - all this new technology and i'm honestly failing to see the benefits. Things were working just fine 5 years ago and now I spend hours/days getting projects to just work...