14

With webpack-dev-server running it seems that all errors in the output are pointing to line numbers in the bundle.js and not the original source file. How do I get line numbers of the original source files? I'm using webpack with babel for ES2015 js.

Screenshot

webpack.config.dev.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: '#source-map',
    entry: [
        `webpack-dev-server/client?http://${process.env.npm_package_config_host}:${process.env.npm_package_config_port}`,
        'webpack/hot/only-dev-server',
        'react-hot-loader/patch',
        './src/index.dev'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'     
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new HtmlWebpackPlugin({
            template: 'index.html', // Load a custom template 
            inject: 'body' // Inject all scripts into the body 
        })
    ],
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loaders: ['babel'],
            include: path.join(__dirname, 'src')
        }]
    }
};

server.js

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config.dev');

const port = process.env.npm_package_config_port || 3000;
const host = process.env.npm_package_config_host || 'localhost';

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true,
    stats: {
        colors: true,
        chunks: false,
        'errors-only': true
    }
}).listen(port, host, function (err) {
    if (err) {
        console.log(err);
    }

    console.log(`Listening at http://${host}:${port}/`);
});

full source code

Steffen
  • 3,327
  • 2
  • 26
  • 30

2 Answers2

7

I had to add retainLines option to my babel loader:

loaders: [{
    test: /\.jsx?$/,
    loaders: ['babel?retainLines=true'],
    include: path.join(__dirname, 'src')
}]

https://babeljs.io/docs/usage/options/

The documentation says

Retain line numbers. This will lead to wacky code but is handy for scenarios where you can’t use source maps.

If someone knows a way that doesn't lead to "wacky" code (whatever that means) please let me know.

Steffen
  • 3,327
  • 2
  • 26
  • 30
  • How does this work if i have something like: module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { extends: path.join(__dirname, '.babelrc'), }, }, ..... ? – Jemar Jones Feb 07 '17 at 19:47
  • Haven't tried this syntax, but maybe `loader: 'babel-loader', query: { extends: path.join(__dirname, '.babelrc'), retainLines: true }` ? – Steffen Feb 07 '17 at 23:14
  • For `babel-loader`, add it within `options` like - `{ loader: "babel-loader", options: { retainLines: true, }, }` – air4x Sep 28 '21 at 13:16
5

Use cheap-module-source-map in your webpack config.

const config = {
  devtool: 'eval-cheap-module-source-map',
  ...
}

See more: https://webpack.js.org/configuration/devtool

double-beep
  • 5,031
  • 17
  • 33
  • 41
miguel savignano
  • 1,109
  • 13
  • 9