Blank page on "/" route. Unable to locate file in Vite manifest

@gych

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

@warpig Your issue might be related to the server{} part in your vite config. Can your share contents of your DockerFile?

@gych docker-compose.yml?

version: '3'
services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.2
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.2/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}'
            IGNITION_LOCAL_SITES_PATH: '${PWD}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
            - redis
            - meilisearch
            - mailpit
            - selenium
    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
    meilisearch:
        image: 'getmeili/meilisearch:latest'
        ports:
            - '${FORWARD_MEILISEARCH_PORT:-7700}:7700'
        volumes:
            - 'sail-meilisearch:/meili_data'
        networks:
            - sail
        healthcheck:
            test:
                - CMD
                - wget
                - '--no-verbose'
                - '--spider'
                - 'http://localhost:7700/health'
            retries: 3
            timeout: 5s
    mailpit:
        image: 'axllent/mailpit:latest'
        ports:
            - '${FORWARD_MAILPIT_PORT:-1025}:1025'
            - '${FORWARD_MAILPIT_DASHBOARD_PORT:-8025}:8025'
        networks:
            - sail
    selenium:
        image: selenium/standalone-chrome
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        volumes:
            - '/dev/shm:/dev/shm'
        networks:
            - sail
networks:
    sail:
        driver: bridge
volumes:
    sail-mysql:
        driver: local
    sail-redis:
        driver: local
    sail-meilisearch:
        driver: local

@warpig try this in vite config

    server: {
        host: true,
        port: 8000, 
        hmr: {
            host: 'localhost'
        }
    }

@gych Still blank page. Checking the Network tab for these: "app.css", "app.js", and "client" share this message "NS_ERROR_CONNECTION_REFUSED"

edit:

and Console shows this as well: Module source URI is not allowed in this document: “http://localhost:8000/@vite/client”.

@warpig Ok that did not work then, I see also in your initial post that the error is only pointing to app.css

What you can try is import app.css direct to app.js

Add this in app.js

import '../css/app.css';

Update @vite to

@vite(['/resources/js/app.js'])

And in vite config change input to

input: 'resources/js/app.js',

@gych is still the blank page

@warpig Which error does it show ?

@gych no error on Console, just the 304 status on those files. from the logs:

[previous exception] [object] (Exception(code: 0): Unable to locate file in Vite manifest: /resources/css/app.css. at /var/www/html/vendor/laravel/framework/src/Illuminate/Foundation/Vite.php:761)
[stacktrace]

@warpig Ok same issue, can you try this config for hmr

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

@gych host goes with 4 zeros, and no dot at the end of the last one? vs code is marking an error there... but the same thing on both logs and statuses..

@warpig My bad host value should be between single quotes

 host: '0.0.0.0',

@warpig Did you get to solve the error? I am having the same. No idea what could be the reason

@callmeniyu Hi, yes indeed i was able to fix this issue. My main problem was on the location of the project. It was located in the "root" directory (running Ubuntu on Windows 10) so i changed the project's location to "var/www/html/"

Hope this helps.