hmr only working when port is 8000

[CloudyCity]

• Laravel Mix Version: 5.0.4
• Node Version:12.10.0
• NPM Version:6.11.3
• OS: MacOS 10.14.6

Description:

When i'm using default config, there isn't wds keyword in the output of npm run hot, and HMR not working.

$ npm run hot

> laravue@0.13.1 hot /Users/lyc/Sites/admin.cps.ggxx
> cross-env NODE_ENV=development BABEL_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js



 DONE  Compiled successfully in 16696ms 

But it works after i change port to 8000.

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

$ npm run hot

> laravue@0.13.1 hot /Users/lyc/Sites/admin.test
> cross-env NODE_ENV=development BABEL_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js

ℹ ｢wds｣: Project is running at http://localhost:8000/
ℹ ｢wds｣: webpack output is served from http://localhost:8000/
ℹ ｢wds｣: Content not from webpack is served from /Users/lyc/Sites/admin.test/public
ℹ ｢wds｣: 404s will fallback to /index.html

Althought it works but no so elegant. Any suggestion will be help!

Steps To Reproduce:

git clone https://github.com/tuandm/laravue.git && cd laravue && npm install && npm run hot

[sid3r]

@CloudyCity Hi, Same issue here, the code compiles successfully but nothing shows at http://localhost:8000/, I tried changing the port to something else, ex: 4000, but still nothing. Have you got it working ? any idea?

[CloudyCity]

@sid3r No yet, this killing me serval weeks.

[CloudyCity]

@sid3r I finally figure it out.

If there isn't wds keyword in the output of npm run hot, that mean the default port already in use, so we should make sure use a unuse port.

1. add those config to webpack.mix.js:

if (mix.inProduction()) {
  mix.version();
} else {
  if (process.env.LARAVUE_USE_ESLINT === 'true') {
    mix.eslint();
  }
  // Development settings
  mix
    .sourceMaps()
    .webpackConfig({
      devtool: 'cheap-eval-source-map', // Fastest for development
      devServer: {
        proxy: {
          '*': 'http://localhost:8000', // proxy to host:port which the 'artisan serve' command will use
        },
      },
    });

  mix.options({
    hmrOptions: {
      host: 'localhost',
      port: 8070, // a unuse port
    },
  });
}

2. run php artisan serve

$ php artisan serve
Laravel development server started: http://127.0.0.1:8000

3. run npm run hot

$ npm run hot

> laravue@0.13.1 hot /Users/lyc/Sites/admin.cps.ggxx
> cross-env NODE_ENV=development BABEL_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js

ℹ ｢wds｣: Project is running at http://localhost:8070/
ℹ ｢wds｣: webpack output is served from http://localhost:8070/
ℹ ｢wds｣: Content not from webpack is served from /Users/lyc/Sites/admin.cps.ggxx/public
ℹ ｢wds｣: 404s will fallback to /index.html

4. visit http://localhost:8070, it should work with hmr.

[sid3r]

@CloudyCity Nice fix, I've been reloading the page by myself for two months now, thank you. By the way if you use sanctum or any library that use the domain name, you should update your .env file with the two new URLs, ex: SANCTUM_STATEFUL_DOMAINS=127.0.0.1:8000,localhost:8070 .