title: How can I track reactjs console errors when using webpack?
body: <p>I'm following the <a href="http://redux.js.org/docs/basics/" rel="nofollow noreferrer">redux tutorial</a> and using webpack to bundle the js files.</p>
  
  <p>My problem is that console errors from React show the stack trace through the webpack bundle, while I would like them to show the stack trace through the actual js code.</p>
  
  <p>E.g., I introduced a misspelling error in one of the js files to demonstrate. Here is the error in the Chromium console:
  <a href="https://i.stack.imgur.com/dsBVf.png" rel="nofollow noreferrer">Screenshot of current error messages</a></p>
  
  <p>I'm aware of source maps, and I have them enabled. They allow me to add breakpoints and stuff, but they don't seem to allow error messages to be printed from the pre-bundled code.</p>
  
  <p>Here is package.json:</p>
  
  <pre><code>{
    "name": "feedmeapp",
    "version": "0.0.1",
    "devDependencies": {
      "babel": "^6.5.2",
      "babel-core": "^6.6.5",
      "babel-loader": "^6.2.4",
      "babel-plugin-transform-decorators-legacy": "^1.3.4",
      "babel-preset-es2015": "^6.6.0",
      "babel-preset-react": "^6.5.0",
      "babel-preset-stage-0": "^6.5.0",
      "eslint": "^2.13.1",
      "react": "^0.14.7",
      "react-hot-loader": "^1.3.0",
      "redux-devtools": "^3.1.1",
      "webpack": "^1.12.13",
      "webpack-bundle-tracker": "0.0.93",
      "webpack-dev-server": "^1.14.1"
    },
    "dependencies": {
      "es6-promise": "^3.1.2",
      "isomorphic-fetch": "^2.2.1",
      "lodash": "^4.5.1",
      "radium": "^0.16.6",
      "react-cookie": "^0.4.5",
      "react-dom": "^0.14.7",
      "react-redux": "^4.4.0",
      "redux": "^3.3.1",
      "redux-thunk": "^1.0.3"
    }
  }
  </code></pre>
  
  <p>Here is my two-tiered webpack config:</p>
  
  <pre><code>//webpack.base.config.js
  
  var path = require("path")
  var webpack = require('webpack')
  
  module.exports = {
    context: __dirname,
  
    entry: {
      // Add as many entry points as you have container-react-components here
      App1: './reactjs/App1',
      vendors: ['react'],
    },
  
    output: {
        path: path.resolve('./feedmeapp/static/bundles/local/'),
        filename: "[name]-[hash].js"
    },
  
    externals: [
    ], // add all vendor libs
  
    plugins: [
      new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
    ], // add all common plugins here
  
    module: {
      loaders: [] // add all common loaders here
    },
  
    resolve: {
      modulesDirectories: ['node_modules', 'bower_components'],
      extensions: ['', '.js', '.jsx']
    },
  }
  </code></pre>
  
  <p>Second File:</p>
  
  <pre><code>// webpack.local.config.js
  
  var path = require("path")
  var webpack = require('webpack')
  var BundleTracker = require('webpack-bundle-tracker')
  var config = require('./webpack.base.config.js')
  
  var ip = 'localhost'
  config.devtool = "#eval-source-map"
  config.output.publicPath = 'http://' + ip + ':3000' + '/assets/bundles/'
  
  config.plugins = config.plugins.concat([
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new BundleTracker({filename: './webpack-stats-local.json'}),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('development'),
        'BASE_API_URL': JSON.stringify('http://'+ ip +':8000'),
    }}),
  ])
  
  config.module.loaders.push(
    { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel'] }
  )
  
  config.entry = {
    App1: [
      'webpack-dev-server/client?http://' + ip + ':3000',
      'webpack/hot/only-dev-server',
      './reactjs/App1',
    ],
  }
  
  module.exports = config
  </code></pre>
  
  <p>I'm bundling this using a simple webpack dev server that hot reloads the bundles.</p>
  
  <pre><code>//server.js
  
  var webpack = require('webpack')
  var WebpackDevServer = require('webpack-dev-server')
  var config = require('./webpack.local.config')
  
  new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    inline: true,
    historyApiFallback: true,
  }).listen(3000, config.ip, function (err, result) {
    if (err) {
      console.log(err)
    }
  
    console.log('Listening at ' + config.ip + ':3000')
  })
  </code></pre>
  
  <p>This workflow comes from a tutorial on using react with django by @mbrochh.</p>
  
  <p>The bundles are loaded as static assets into a django template which will be running my whole project. However, I don't believe that any of the django code would affect what I'm trying to do with the error messages.</p>
  
  <p>Any suggestions?</p>