Error: listen EADDRINUSE – using browser sync with Laravel mix

Viewed 21

We use Laravel Mix as a webpack wrapper to run our watch and build processes for several projects.

In the development process it happens that watch processes are active in several projects at the same time. This leads to this error, since there is a collision of the ports:

/Users/...../app/dev/frontend/node_modules/webpack-dev-server/lib/Server.js:2476
        throw error;
        ^

Error: listen EADDRINUSE: address already in use 127.0.0.1:8080
    at Server.setupListenHandle [as _listen2] (node:net:1334:16)
    at listenInCluster (node:net:1382:12)
    at GetAddrInfoReqWrap.doListen [as callback] (node:net:1520:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:73:8) {
  code: 'EADDRINUSE',
  errno: -48,
  syscall: 'listen',
  address: '127.0.0.1',
  port: 8080
}

Here's the relevant part of our webpack.mix.js configuration file:

const mix = require('laravel-mix');
const devDistPath = './dist';

mix
    .js('src/_main.js', devDistPath + '/js/main.js')
    .sass('src/_main.scss', devDistPath + '/css/main.css', {
        implementation: require('node-sass')
    })
    .njk('src/','dist/',{
        data: {
            environment: 'development'
        },
        ext: '.html'
    })
    .setPublicPath('./');

mix.options({
    processCssUrls: false,
    terser: {
        extractComments: false,
    },
});

mix.browserSync({
    host: "localhost",
    serveStatic: ['./src'],
    files: "./*.html",
    startPath: "/dist/views/index.html"
});

Is there a way to configure browsersync to automatically use the next free port if port 8080 is already in use?

Thanks in advance!!

0 Answers
Related