Webpack + Babel Wrong Line Numbers in Stack Trace

Question

I'm building an application with Webpack and Babel. When the application runs into an error, it correctly lists the line number for the first error but then shows the line number for the minified code for each subsequent step.

My Webpack config is as follows,

const webpack = require('webpack');
const path = require('path');
module.exports = {
    module: {
        loaders: [
            {
                loader: "babel-loader",
                exclude: [
                    /(node_modules)/,
                ],
                query: {
                    presets: ['es2015','react'],
                    plugins: ['transform-object-rest-spread']
                }
            },
            {
                test:/\.less$/,
                exclude:'/node_modules',
                loader:"style!css!less"
            }
        ]
    },
    entry: {
        "index": ["./src/main"]
    },
    output: {
        path: path.resolve(__dirname, "public"),
        publicPath: "/assets",
        filename: "[name].bundle.js"
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
    },
    devServer: { inline: true },
    devtool: 'source-map'
};

AFAIU, you are debugging in minified build, isn't it? What help are you exactly asking? Please be specific. — Anvesh Checka, Mar 13 '17 at 06:42
Possible duplicate of [webpack-dev-server: how to get error line numbers of orignal files](https://stackoverflow.com/questions/37174721/webpack-dev-server-how-to-get-error-line-numbers-of-orignal-files) — Michael Freidgeim, Nov 06 '19 at 12:34

score 5 · Answer 1 · edited May 09 '19 at 00:39

5

In order to debug from webpack generated builds, you need to understand little bit more about 'devtool' setting in webpack. Here is the link to the official documentation. Webpack Devtool Configuration

Now coming to your problem, you can use either of these below in order to navigate to your original piece of code which caused the problem. This is possible only using sourcemaps.

eval-inline-source-map //For DEV builds

or

cheap-inline-module-source-map //For PROD builds

E.g.,

{
   'devtool': 'cheap-inline-module-source-map'
}

edited May 09 '19 at 00:39

Tito Nobre

1,172
14
17

answered Mar 13 '17 at 06:52

Anvesh Checka

3,787
2
21
28

2

I've given this a try but the line numbers are still not correct – Code Whisperer Mar 13 '17 at 23:40
@CodeWhisperer Wait, are you suggesting that line number in your code files be matched with generated build files? If that is, then you need to add up the webpack runtime code as well. – Anvesh Checka Mar 18 '17 at 00:57
official documentation doesn’t have cheap-inline-module-source-map, similar inline-cheap-module-source-map is not appropriate for production – Michael Freidgeim Nov 06 '19 at 12:46

Webpack + Babel Wrong Line Numbers in Stack Trace

1 Answers1

Linked