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?

Snafu

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

Driedup

Answer 2

I had the same error. I made a general mistake: not generated a minified version.

source-map-explorer based on two files:

• bundle.js — a minified version
• bundle.js.map — source maps (generated for bundle.js)

---

Step 1. Build a dist file + source maps

eg. via webpack

npx webpack -p src/main.js --production --devtool source-map

eg. via rollup

npx rollup -i src/main.js -o dist/bundle.js -m

Step 2. Audit by

npx source-map-explorer dist/main.js

Amar