source-map-explorer error: Check that you are using the correct source map

Question

I have a JavaScript project that uses Webpack 4 with source maps:

mode: 'development',
entry: { app: './src/app.js' },
output: {
    filename: 'app.[contenthash].js',
    path: outputPath,
},
devtool: 'sourcemap',
externals,
.... 

It generates 2 JS files in my dist folder: app.[contenthash].js and app.[contenthash].js.map attached to it.

I installed source-map-explorer: https://www.npmjs.com/package/source-map-explorer

But when i run it on these files, i get the error:

Your source map refers to generated column 8 on line 17, but the source only contains 0 column(s) on that line. Check that you are using the correct source map.

How can i fix that?

EDIT:

When i change Webpack's mode to production it's not throwing that error. Why? Now with production mode, it just hangs when i run it.. how long does it suppose to take?

Answer 1

This answer is based on @piecioshka's ~ but disables column/line mapping check, as indicated in this source-map-explorer#README

The full command looks as:

npx source-map-explorer dist/main.js --no-border-checks