Laravel 9 + Sail + Vite

Starting the vite server locally can be done with npm, running npm run dev. But while everything is running in Sail through WSL2, you probably would want the Vite server there as well. Just for good measure. Which you do with the sail prefix.

sail npm run dev

Gives the following errors in Console.

http://0.0.0.0:5173/@vite/client net::ERR_ADDRESS_INVALID
http://0.0.0.0:5173/resources/ts/app.tsx net::ERR_ADDRESS_INVALID
http://0.0.0.0:5173/@react-refresh net::ERR_ADDRESS_INVALID

Because Vite thinks the container is the host and acts accordingly. To fix this issue, point the Hot Module Replacement to localhost. Change your vite.config.js

// vite.config.js    
export default defineConfig({
	server: {
        hmr: {
            host: 'localhost',
        },
    },
    
    // ...
});

Originally published at https://joeyantonisse.nl on October 26, 2022.