react-slingshot: Bundle analyzer Error: listen EADDRINUSE :::8888

I got this to work by modifying the config options passed into the plugin:

new BundleAnalyzerPlugin({analyzerMode: 'static'})

This launches the analyzer page against the generated data file rather than the bundle itself, and works well to get past the issue when using hot reloading.

Good luck!

This just means you already have something running on port 8888 (likely the same project, running in another window) 😃

I’m going to leave this here for anyone using Vue’s modern mode build with webpack’s BundleAnalyzerPlugin. Hope it helps someone 🥂

Problem I received this error when using the vue ui build task for production in --modern mode. Because it generates a legacy build and a modern build. The webpack bundle analyzer plugin fails on the second build.

Error: listen EADDRINUSE: address already in use 127.0.0.1:8888
    at Server.setupListenHandle [as _listen2] (net.js:1256:14)
    at listenInCluster (net.js:1304:12)
    at doListen (net.js:1443:7)
    at processTicksAndRejections (internal/process/next_tick.js:76:17)
Emitted 'error' event at:
    at emitErrorNT (net.js:1283:8)
    at processTicksAndRejections (internal/process/next_tick.js:76:17)
 ERROR  Error: Command failed: C:\Users\Jeff\Documents\GitHub\project4\node_modules\@vue\cli-service\bin\vue-cli-service.js build --mode production --dest dist --target app --modern --dashboard

Solution

// vue.config.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin({
        analyzerPort: process.env.VUE_CLI_MODERN_BUILD ? 8888 : 9999 // Prevents build errors when running --modern
      })
    ]
  }
}

Docs for modern mode Vue CLI v3 Modern Mode Link

Hrmm. I’ve reopened this to see if we can figure out a root cause. @iyel, if you specify a different port, does it work for you?

Here’s how:

Change this line to specify a port:

new BundleAnalyzerPlugin({
  // Port that will be used by in `server` mode to start HTTP server. 
  analyzerPort: 4000,
})

More info

Since I’m also falling into this old issue, I’ll also add my word:

webpack-bundle-analyzer now seems to be a dependency of vue-cli-service

So I explicitely uninstalled it

npm uninstall webpack-bundle-analyzer

And generated a report with

vue-cli-service build --report # Or include it as a script in package-json

The report should now be generated in src/build/report.html

I got this to work by modifying the config options passed into the plugin:

new BundleAnalyzerPlugin({analyzerMode: 'static'})

This launches the analyzer page against the generated data file rather than the bundle itself, and works well to get past the issue when using hot reloading.

Good luck!

well done。

looks like new BundleAnalyzerPlugin() causes the error. By commenting the line https://github.com/coryhouse/react-slingshot/blob/master/webpack.config.dev.js#L41 there will be no crash and no analyzer