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


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 | 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. 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. 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: [

Issue Analytics

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

github_iconTop GitHub Comments

jameswong3388commented, Jun 30, 2022

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

refer to

and add this in your vite config

server: {
        hmr: {
            host: 'localhost',
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 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

How To Fix Laravel Sail Hot Reloading (HMR) Not Working Error
The problem with Laravel Sail is, HMR does not work with its default configuration. The default Laravel Sail Docker Compose configuration ...
Read more >
Cannot get hot reload to work with Laravel Sail, Vite and Vue 3
After many hours, I have been unable to get hot reload working with Vite on Laravel Sail. The following is my vite.config.ts file:...
Read more >
Quick Tip Laravel Mix Hot-Reloading in Sail with Browsersync
Running Laravel Mix. You should install all the node components, by executing: sail npm install. Then you should be able to execute Laravel...
Read more >
How to handle working folder when Laravel in WSL2 docker ...
Just find out that using php artisan serve do not have the problem on returning wrong directory, so the problem might be focus...
Read more >
Laravel Development on Windows in 2022 - kleypot
But while the Laravel docs give you enough to get up and running, they do not ... Laravel starter project pre-configured for VSCode...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found