webpack jsx source maps without webpack dev server

Question

I am unable to get webpack to create source maps from the original source with jsx files. Using devtool: 'source-map' I can get source maps in their original es6 code to print out for js files, but jsx files source maps are mapped to their es5 mangled formats.

I've tried a few combos of configurations including using webpack. SourceMapDevToolPlugin and using different types of devtool source maps with no luck.

This project is a chrome extension, so due to the restrictive environment I'm not able to use webpack dev server, eval-source-map.

Following is my webpack config:

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

module.exports = [{
  devtool: 'source-map',
  entry: {
    app: './' + path.join('src', 'app'),
    vendor: [
      'react',
      'react-dom',
      'react-redux',
      'redux',
      'redux-thunk'
    ]
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'client.js'
  },
  module: {
    preLoaders: [{
      test: /\.jsx?$/,
      loader: 'babel',
      query: {
        plugins: [
          'syntax-jsx',
          'transform-react-jsx'
        ],
        presets: [
          'latest',
          'react',
          'stage-3'
        ]
      }
    }],
    loaders: [{
      test: /\.jsx$/,
      loader: 'jsx'
    }]
  },
  resolve: {
    extensions: [
      '',
      '.js',
      '.jsx'
    ],
    root: [
      path.resolve('./src')
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
    new HtmlWebpackPlugin({
      title: 'Bookmarks'
    })
  ]
}];

Answer 1

Removing the unsupported jsx loader from loaders config fixed the problem!