Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HMR not working with Laravel Sail in WSL2

See original GitHub issue

Laravel Vite Plugin Version: 2.9.13
Laravel Version: 9.19.0
Node Version: 16.15.1
NPM Version: 8.11.0
Windows 10 with WSL2
Docker Desktop 4.8.1 (78998) using WSL2 backend

Description:

Setting up a new Laravel project with Sail on Windows. The app and asset bundling works, but HMR is not triggered when updating resources, or even when manually refreshing the tab.

The blade template calls @vite(['resources/css/app.css', 'resources/js/app.js']) in the <head> section. App loads successfully, including styles. The dev tools console shows both [vite] connecting... and [vite] connected. Saving a change to a resource file does not trigger a browser update, and even manually refreshing does not work. (The route loads, but with stale resources).

Steps To Reproduce:

Connect to WSL instance in Terminal, and install Laravel via curl -s https://laravel.build/example-app | bash
cd and run npm install
From the WSL connected Terminal npm run dev. (I can see ready in 3523ms and my APP_URL)
Load the app in the browser (e.g. http://example-app.test) with a view that uses the @ vite helper
The page loads as expected, console shows [vite] connected
Changing and saving resources/css/app.css does not update the browser. Dev console shows no requests or errors
Force refreshing shows no changes
Manually opening the CSS link in a new tab (e.g. http://127.0.0.1:3000/resources/css/app.css) shows the updated content. If you save another change to the CSS and refresh this tab the changes will show
Changing the <link href> attribute on the style link in the main tab to append a cache-bust query parameter (e.g. http://127.0.0.1:3000/resources/css/app.css?v=2) does trigger the new style
Apart from manually changing the URL like that I need to stop and restart the npm run build server and then reload the tab to see changes.

Vite Config

Using the default vite.config.js

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

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

Issue Analytics

State:
Created a year ago
Comments:19 (5 by maintainers)

Top GitHub Comments

5reactions

jameswong3388commented, Jun 30, 2022

Wait for the latest release and there will be a fix for this issue.

refer to https://github.com/laravel/vite-plugin/pull/42#issue-1289410988

and add this in your vite config

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

2reactions

mike-healycommented, Jul 2, 2022

Thanks @bradleybernard and @jessarcher . I got it working by running the npm dev server outside of WSL (and I did not need that server hmr localhost block once I did either).

So in my case I needed to install nvm and node directly on Windows using this guide. (I already had them inside the WSL2 Ubuntu virtual machine)

Then I started Sail from within WSL, the dev server from outside of WSL2 and the hot reloading worked perfectly 😃