HMR not working with Laravel Mix in Docker

the problem is in

mix.options({    hmrOptions: {        host: 'localhost',        port: '80'    },});

you can not use localhost since it is refer to your APP container in this case, what should you do is using web instead since compose will resolve the service names for you:

mix.options({    hmrOptions: {        host: 'web',        port: '80'    },});mix.webpackConfig({    mode: "development",    devtool: "inline-source-map",    devServer: {        disableHostCheck: true,        headers: {            'Access-Control-Allow-Origin': '*'        },        host: "web",        port: 80    },});

Webpack might have issue with file watcher being inside docker. Try adding polling option in the devServer config.

mix.webpackConfig({  mode: "development",  devtool: "inline-source-map",  devServer: {    watchOptions: {      poll: true    }  }});

For the listen EADDRNOTAVAIL: address not available 172.25.0.4:80 issue:

1. See if there's a container running with docker ps
2. Kill the blocking container with docker stop [container_id]

I had the same issue, and used following command to fix that:

Laravel Mix version 6:

npx mix watch --hot -- --host 0.0.0.0 --port 8080 --watch-options-poll=1000

The only issue is that change host and port by mix.options API, did not works for me.