Bundle analyzer Error: listen EADDRINUSE :::8888

[ilife5]

Node version: v6.5.0

npm version: 3.10.3

Operating system: macos 10.12.1

Command line used: npm start

Steps to reproduce:

1, change some code under src.
2, save
3, Got the errmsg:

webpack: bundle is now VALID.


Unable to find bundle asset "/Users/jifeng/gitlab/cmbc/dist/bundle.js".
Analyzer will use module sizes from stats file.

events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::8888
    at Object.exports._errnoException (util.js:1026:11)
    at exports._exceptionWithHostPort (util.js:1049:20)
    at Server._listen2 (net.js:1253:14)
    at listen (net.js:1289:10)
    at Server.listen (net.js:1385:5)
    at EventEmitter.listen (/Users/jifeng/gitlab/cmbc/node_modules/webpack-bundle-analyzer/node_modules/express/lib/application.js:617:24)
    at Object.startServer (/Users/jifeng/gitlab/cmbc/node_modules/webpack-bundle-analyzer/lib/viewer.js:57:14)
    at BundleAnalyzerPlugin.startAnalyzerServer (/Users/jifeng/gitlab/cmbc/node_modules/webpack-bundle-analyzer/lib/BundleAnalyzerPlugin.js:78:12)
    at analyzeFn (/Users/jifeng/gitlab/cmbc/node_modules/webpack-bundle-analyzer/lib/BundleAnalyzerPlugin.js:57:24)
    at Timeout._onTimeout (/Users/jifeng/gitlab/cmbc/node_modules/webpack-bundle-analyzer/lib/BundleAnalyzerPlugin.js:69:11)
    at tryOnTimeout (timers.js:232:11)
    at Timer.listOnTimeout (timers.js:202:5)

[coryhouse]

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

[iyeldinov]

Same problem, nothing is running on port 8888 (analyzer uses this port actually)

Also I had deleted example files running node script

[coryhouse]

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

[iyeldinov]

@coryhouse I've specified the different port, error persists
Error: listen EADDRINUSE :::4000

[kwelch]

@Iyel Have you check to confirm that there is not an outstanding process in the background that is hung?

Here is a SO that may help. The first command will list all processes that have node in them and if needed the second command will kill them off.

I have had to start using this recently after updating my MBP to Sierra

[nickytonline]

@Iyel, I checked this as well and even after doing edits and hot reloading kicks in there is no error. The only time this happens is if something is running on the port that it's complaining about like Kyle and Cory mention, e.g. running react-slingshot's npm start when an npm start is still running.

[cpietsch]

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

[coryhouse]

Interesting. I can't seem to reproduce. @cpietsch, can you share the following:
npm version
node version
OS
Command line that you're using (built into an editor, or OS' native)

[cpietsch]

npm 3.10.8
node v6.9.1
osx terminal

[falconmick]

Same issue, I believe the BundleAnalyzerPlugin isn't closing the port.

[nickytonline]

OK, so @falconmick and co., the issue is you're running npm start and while it's still running, you're running another npm start for react-slingshot and at that point the port is in use like I mentioned above in a previous comment?

[nickytonline]

@falconmick, @cpietsch, @Iyel , I definitely get the error then, but I wonder if this is a non-issue as you're running npm start while another is still running. @coryhouse, @kwelch thoughts?

[nickytonline]

Another option could be to just run the bundle analyzer when running a different npm script.

[coryhouse]

I'd prefer the bundle analyzer run as a separate script and would welcome a pr.

[nickytonline]

@coryhouse, I'll get a PR for this-this weekend probably unless there are any OSS peeps that would like to tackle this before then.

[falconmick]

I wasn't running another instance. I would be running npm start -s and as soon as I got an error in my code it would try to rebind the bundle analyser (I did nothing) which then caused it to fail due to port not available

On 10/11/2016, at 4:41 PM, Nick Taylor notifications@github.com wrote:

@coryhouse, I'll get a PR for this-this weekend probably unless there are any OSS peeps that would like to tackle this before then.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[ipochi]

same issue @coryhouse @nickytonline

npm 3.10.8
node v6.9.1
OS - mint
Terminal - bash

changed the port , still issue exists.
and No i am not running another terminal instance or any other npm start
just like @falconmick

[kwelch]

I am wrapping up a project tonight. I should be available after or this weekend to look into this a bit.

[coryhouse]

I've removed bundleAnalyzerPlugin for now since it's apparently buggy on some machines. Needs to be implemented as a separate npm script anyway since displaying every time the app opens is overkill. 47f020c

[falconmick]

Cheers

Sent from my iPhone

On 11/11/2016, at 4:20 PM, Cory House notifications@github.com wrote:

I've removed bundleAnalyzerPlugin for now since it's apparently buggy on some machines. Needs to be implemented as a separate npm script anyway since displaying every time the app opens is overkill. 47f020c

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[kwelch]

@coryhouse Is this something we want to support, if we are able to find a fix for this?

[coryhouse]

Yeah, I'm a fan of the feature. But I think a dedicated bundle-analyzer script makes sense.

[mlwigdahl]

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!

[coryhouse]

Good stuff @mlwigdahl! Thanks for sharing. I still feel a separate npm script makes sense to avoid always opening a report that is only worth looking at occasionally. Anyone strongly disagree?

[nickytonline]

@coryhouse, I'm still on board with a separate script as it really is something you don't need to run all the time.

[ilife5]

good job!! @nickytonline @mlwigdahl

[xiaoang]

i'm a soft enigner of chinese, i got the same error when my project run。 tks the answer of this list。

[xiaoang]

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。

[onx2]

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

[Glideh]

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