laravelvagrantlaravel-mixhot-module-replacement

Hot Module Replacement not working with Laravel Mix and Vagrant

I am trying to get Hot Module Replacement working with Laravel mix and Vagrant. My JS/CSS is compiled on the host machine and the website runs from a Vagrant box. I have followed the instructions here. I am running

npm run hot

on the host machine. When I change a JS/CSS file, the files are compiled. The correct url seems to be generated in the website. When I look in the page source I see:

<script src="//localhost:8080//js/min/myfile.min.js"></script>

This correctly returns the script (even though there are two slashes in there).. But HMR is still not working, and I get these errors in the console:

[WDS] Disconnected!

Invalid Host/Origin header

How can I get HMR working for Vagrant?

Solution

  • In the scripts section of package.json disable host checks for the hot script

    "hot": "cross-env NODE_ENV=development 
node_modules/webpack-dev-server/bin/webpack-dev-server.js
--inline --hot --disable-host-check 
--config=node_modules/laravel-mix/setup/webpack.config.js",

    Because the Laravel website is hosted on a different host and webpack dev server raises that security flag