Next.js: webpack-bundle-analyzer sever mode is broken because of two sets of bundles

[PengyuanZhao]

webpack-bundle-analyzer server mode is broken after I upgraded to Next.js 5. There are two sets of bundles: .next/bundles(uglified) and .next/dist/bundles. webpack-bundle-analyzer will generate report.html for each of them and seems to try to open two servers on the same port which then crashes. Any way to get around this?

Thanks!

[ghost]

In the webpack bundle analyzer config set the analyzerMode to static. It will still generate and open two reports, but it won't crash.

webpackConfig.plugins.push(
  { analyzerMode: 'static' }
);

[PengyuanZhao]

@shane805 Good call. That's actually what I'm using instead for now. But still wondering if there is a way to make the server mode work.

[timneutkens]

You can now use next-bundle-analyzer to handle this. It automatically configures the correct ports to open 2 compilations. https://github.com/zeit/next-plugins/tree/master/packages/next-bundle-analyzer

[lependu]

Hi!
Just for the record, the next-bundle-analyzer has hardcoded config which does not suit me.
But I stole its code and make it work with server mode:

// nex.config.js
module.exports = {
  webpack: (config, options) => {
    if (ANALYZE) {
      const { isServer } = options
      config.plugins.push(new BundleAnalyzerPlugin({
        analyzerMode: 'server',
        //  The host changed from 127.0.0.0 to make it work when running it in docker container. Maybe you do not need that change.
        analyzerHost: '0.0.0.0', 
        analyzerPort: isServer ? '8881': '8882',
        openAnalyzer: false
      }))
    }

    return config
  }
}

[PengyuanZhao]

@lependu Thanks! It's great to know that isServer is the key here.

[meotimdihia]

we should fix examples in documentation too. I met this problem today while learn next.js.