next.js bundle analyzer isn't creating pages to vew bundles

Question

I'm trying to reduce the bundle size of my site by using https://www.npmjs.com/package/@next/bundle-analyzer

At the moment, when I run npm analyze with

"analyze": "cross-env ANALYZE=true next build",

It isn't outputting the html files with the visualization needed.

This is my next.config.js

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')


const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
  })

module.exports = withPWA({
  pwa: {
    dest: 'public',
    runtimeCaching,
  },
  poweredByHeader: false,
},
withBundleAnalyzer(),

)

using this nextjs-analyze-app-bundle tutorial.

What is going wrong?

Did you ever figure out the answer? I have the same issue. – TwisterMc Mar 03 '21 at 04:56 — TwisterMc, Mar 03 '21 at 04:56

score 3 · Answer 1 · answered Mar 10 '21 at 15:56

Looks like this has been answered on Vercel's issues board. Copying their solution here:

These plugins are functions that enhance the configuration object, so you have to wrap them instead of providing them as arguments:

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')


const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer(withPWA({
    pwa: {
        dest: 'public',
        runtimeCaching,
    },
    poweredByHeader: false,
}));

score 1 · Answer 2 · answered Jun 14 '21 at 11:46

Before I was doing it like this,

module.exports = withBundleAnalyzer(
  withPWA({
    pwa: {
      dest: 'public',
      runtimeCaching,
    },
    poweredByHeader: false,
  })
)

module.exports = 
  {
    env: {
      BASE_URL: process.env.BASE_URL,
    },
    future: {
      webpack5: true,
    },
    reactStrictMode: true,
  }

Not sure but I think you should only need to have one module.exports so I wrapped my other stuff inside the withBundleAnalyzer like this

module.exports = withBundleAnalyzer(
  withPWA({
    pwa: {
      dest: 'public',
      runtimeCaching,
    },
    poweredByHeader: false,
  }),
  {
    env: {
      BASE_URL: process.env.BASE_URL,
    },
    future: {
      webpack5: true,
    },
    reactStrictMode: true,
  }
)

next.js bundle analyzer isn't creating pages to vew bundles

2 Answers2