Laravel Mix HMR Server Does Not Launch

Question

• Laravel Mix Version: 6.0.43
• Node Version (node -v): 16.13.1
• NPM Version (npm -v): 8.1.2
• OS: Windows 10 21h2

Description:

THIS IS HAPPENING ON A FRESH NEW INSTALL OF LARAVEL AND MY OTHER PROJECTS

Running npm run hot changes the script tag sources to http://localhost:8080/*/*.* from http://localhost/*/*.* HOWEVER I always get net::ERR_EMPTY_RESPONSE from localhost:8080. The HMR server doesn't launch at all. The terminal output of the command also have no mention of spinning up a new web server.

PS C:\Users\Eric Wang\Documents\GitHub\test-laravel-mix> npm run hot

● Mix █████████████████████████ emitting (95%)
 emit

● Mix █████████████████████████ done (99%) plugins
 WebpackBar:done



✔ Mix
  Compiled successfully in 5.51s


   Laravel Mix v6.0.43   


✔ Compiled Successfully in 5336ms
┌────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐├────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤│                                                                                                        css/app.css │ 47.6 KiB │└────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘webpack compiled successfully

Here's a picture of the browser failing to fetch the bundle files

Steps To Reproduce:

I am running Docker 4.5.1 using legacy Hyper-V. I containerized Laravel and PHP BUT not the frontend and JS. I am running Laravel Mix on my main system.

1. Clone the fresh installation of Laravel from https://github.com/ericwang401/test-laravel-mix
2. Clone Laradock in the project folder using git clone https://github.com/laradock/laradock.git
3. CD to the Laradock folder and make .env file with cp .env.example .env
4. Inside .env file set PHP_VERSION to PHP_VERSION=8.0 AND DO NOT EDIT MYSQL SETTINGS
5. Now edit the Laravel environment file

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=default
DB_USERNAME=default
DB_PASSWORD=secret

6. Start up the Laravel app in Laradock folder using docker-compose up -d nginx mysql
7. Enter into bash mode in the Docker container docker-compose exec workspace bash
8. Install Composer dependencies BUT NOT NPM DEPENDENCIES YET composer i
9. Now exit out of the Docker container CNTRL + D
10. Install NPM dependencies in project root ON YOUR MAIN SYSTEM npm i
11. Run on your main system npm run hot
12. Now go to http://localhost and IT SHOULD be a white screen
13. Check console logs and it should give net::ERR_EMPTY_RESPONSE when it tries to fetch the bundle files

REMEMBER: the backend is running inside Docker The frontend (Laravel Mix) is running on the host system

This issue is happening on a FRESH project installation of Laravel 9 + Jetstream AND it's also happening on my other older projects like https://github.com/StratumPanel/Stratum-Panel

The HMR server is simply not launching.

Answer 1

I found out the issue. The problem was that the default port, 8080, Laravel Mix HMR was using couldn't be binded to. Webpack Dev Server doesn't respond with a message of failing to bind to a port. To confirm this issue, I replicated the environment on my friend's PC and it too couldn't bind to port 8080, but this time it reported an error that the dev server couldn't bind to port 8080.

I fixed this issue by specifying

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

And it works! On both my friend's pc and my pc.

I used the exact same reproduction instructions on my friend's PC.

I spent way too long investigating this issue 😭