How do I generate sourcemaps for nextjs? [duplicate]

Question

I'm using Next.js for my application and I want to generate sourcemaps to inspect bundle sizes. I followed the instructions given on Next.js: How to use source-map-explorer with Next.js

But I'm getting the following error:

.next/static/chunks/styles.73849dc0d772a52b5056.js
  Unable to find a source map.
  See https://github.com/danvk/source-map-explorer/blob/master/README.md#generating-source-maps
.next/static/chunks/webpack-2ae0ca3384e062691226.js
  Unable to find a source map.
  See https://github.com/danvk/source-map-explorer/blob/master/README.md#generating-source-maps
.next/static/chunks/webpack-d9a7914a2067f7938722.js
  Unable to find a source map.
  See https://github.com/danvk/source-map-explorer/blob/master/README.md#generating-source-map

Across all of the .js chunks. Because of some plugin I can't really figure out how to add stuff directly into the module.exports section so instead I have:

const nextConfig = {
    productionBrowserSourceMaps: true,
    ...

And the withPlugins module I'm using includes the nextConfig at the end.

  ],
  nextConfig
)

So not sure if that's what was messing this up or it was something else completely?

Answer 1

The solution to this was actually to upgrade to nextjs version 11. We were on version 10 where the given configuration for generating sourcemaps doesn't work.