title: Uncaught ReferenceError: exports is not defined
body: <p>I am trying to use webpack to babel and package my web-app (React + ES6). However whenever I run the webpack-dev-server and hit the page I get <code>bundle.js:1 Uncaught ReferenceError: exports is not defined</code> What am I doing wrong?</p>
  
  <p>Here is my webpack configuration:</p>
  
  <pre><code>var webpack = require('webpack');
  
  module.exports = {
      entry : [
          './lib/index.js'
      ],
      output : {
          path : __dirname + '/dist/',
          libraryTarget: 'commonjs',
          filename : 'bundle.js'
      },
      plugins : [
          new webpack.NoErrorsPlugin()
      ],
      devtool: 'eval',
      module : {
          loaders : [
              {
                  test : /\.js$/,
                  loaders : [
                      'react-hot',
                      'babel'
                  ],
                  exclude : /node_modules/
              },
              {
                  test : /\.(jpe?g|png|gif|svg)$/i,
                  loaders : [
                      'url?limit=8192',
                      'img'
                  ]
              },
              {
                  test : /\.scss$/,
                  include : /styles/,
                  loaders : [
                      'style',
                      'css',
                      'sass'
                  ]
              }
          ]
      },
      resolve : {
          extensions : ['', '.js', '.json']
      },
      externals : ['request']
  };
  </code></pre>
  
  <p>Here is my package.json</p>
  
  <pre><code>{
  ...
  "dependencies": {
    "babel-core": ": ^6.0.0",
    "lodash": ": ^4.6.0",
    "react-dom": ": ^0.14.0",
    "react-redux": ": ^4.0.0",
    "react": ": ^0.14.0",
    "redux-devtools": ": ^2.1.5",
    "redux-thunk": ": ^1.0.0",
    "redux": ": ^3.0.4",
    "request": ": ^2.69.0"
  },
  "devDependencies": {
    "babel-loader": ": ^6.1.0",
    "babel-preset-es2015": ": ^6.6.0",
    "babel-preset-react": ": ^6.5.0",
    "css-loader": ": ^0.23.0",
    "file-loader": ": ^0.8.4",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "img-loader": ": ^1.2.0",
    "node-sass": ": ^3.2.0",
    "react-hot-loader": ": ^1.3.0",
    "sass-loader": ": ^3.1.2",
    "style-loader": ": ^0.13.0",
    "webpack": ": ^1.12.9",
    "webpack-dev-server": ": ^1.14.1"
  },
  ...
  }
  </code></pre>
  
  <p>webpack-dev-server</p>
  
  <pre><code>var webpack = require('webpack'),
      WebpackDevServer = require('webpack-dev-server'),
      config = require('../webpack.config.js');
  
  new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true
  }).listen(8081, 'localhost', function (err, result) {
      if (err) {
        console.log(err);
      }
  
      console.log('Listening at localhost:8081');
  });
  </code></pre>
  
  <p>.babelrc</p>
  
  <pre><code>{
     "presets": ["es2015", "react"]
  }
  </code></pre>
  
  <p>gulpfile</p>
  
  <pre><code>var gulp = require('gulp'),
      babel = require('gulp-babel');
  
  gulp.task('babel', function () {
      return gulp.src('src/**/*.js').pipe(babel({
          presets : ['es2015', 'react']
      })).pipe(gulp.dest('lib'));
  });
  
  gulp.task('default', ['babel']);
  </code></pre>