title: Karma + Webpack (babel-loader) + ES6 "Unexpected token import"
body: <p><strong>/edit: I stripped the config completely to a minimum demonstrating the problem. I also uploaded a working project to GitHub that you can checkout, so you can see for yourself.</strong></p>
  
  <p>Problematic use case on GitHub: <a href="https://github.com/bbottema/webpack-angular15-es6-karma">webpack-angular15-es6-karma</a> (<a href="https://github.com/bbottema/webpack-angular15-es6-karma/raw/master/webpack-angular15-es6-karma.7z">download 7z archive</a>)</p>
  
  <pre><code>npm install
  npm run build
  npm run test
  </code></pre>
  
  <hr>
  
  <p>I know there are a couple of related questions, but the world is moving so fast and there are so many factors / dependencies that I'm not able to crack this problem with the current proposed solutions.</p>
  
  <p>I have a webpack config that takes care of all my source code and it works great.</p>
  
  <p>For testing, I reuse that config to take care of a single central entry script that loads both the sources and the test files. I could not find another way to import modules from my source code into my test code for testing.</p>
  
  <p><strong>Karma builds fine reusing my webpack config, but the browser reports an error as soon as it is opened.</strong></p>
  
  <p>The source code uses ES6 imports and webpack require statements.</p>
  
  <p><strong>package.json:</strong></p>
  
  <blockquote>
    <p>npm run build >>> webpack --config webpack.config.js --display-error-details --colors --progress</p>
    
    <p>npm run test >>> karma start --single-run --no-auto-watch karma.config.js</p>
  </blockquote>
  
  <pre><code>{
    "name": "ProblemDemo",
    "scripts": {
      "build": "rimraf dist &amp;&amp; webpack --config webpack.config.js --display-error-details --colors --progress",
      "test": "karma start --single-run --no-auto-watch karma.config.js"
    },
    "dependencies": {
      "angular": "^1.5.7",
      "angular-filter": "^0.5.8"
    },
    "devDependencies": {
        "webpack": "1.13.1",
        "html-loader": "0.4.3",
        "babel-loader": "5.3.2",
        "html-webpack-plugin": "1.6.1",
        "rimraf": "^2.5.3",
        "run-sequence": "1.1.2",
        "jasmine-core": "^2.4.1",
        "karma": "^0.13.19",
        "karma-chrome-launcher": "^0.2.2",
        "karma-coverage": "^0.5.3",
        "karma-jasmine": "^0.3.6",
        "karma-webpack": "^1.7.0",
        "loader-utils": "^0.2.12"
    }
  }
  </code></pre>
  
  <p><strong>karma.config.js:</strong></p>
  
  <pre><code>module.exports = function (config) {
      config.set({
          browsers: ['Chrome'],
          coverageReporter: {
              reporters: [
                  { type: 'html', subdir: 'html' },
                  { type: 'lcovonly', subdir: '.' }
              ]
          },
          files: ['./tests.webpack.js'],
          frameworks: ['jasmine'],
          preprocessors: { './tests.webpack.js': ['webpack'] },
          reporters: ['progress', 'coverage'],
          webpack: configureWebpack()
      });
  
      function configureWebpack(webpackConfigFunction) {
          var webpackConfig = require('./webpack.config');
          webpackConfig.entry = undefined; // karma will pass the proper argument for entry
          return webpackConfig;
      }
  };
  </code></pre>
  
  <p>As you can see I'm not using karma-babel plugins: I'm not sure why I would need those, seeing I already have a working build for code with import / require statements.</p>
  
  <p><strong>test_entry.js:</strong></p>
  
  <pre><code>var testsContext = require.context('./test', true, /\.js$/);
  testsContext.keys().forEach(testsContext);
  
  var srcContext = require.context('./app', true, /\.js$/);
  srcContext.keys().forEach(srcContext);
  </code></pre>
  
  <hr>
  
  <p>The webpack build succeeds without a hitch (and emits <em>test_entry.js</em> chunk of expected file size), but then Karma opens Chrome and as soon as the page is loaded I'm greeted with the following error:</p>
  
  <blockquote>
    <p>Chrome 51.0.2704 (Windows 7 0.0.0) ERROR</p>
    
    <p>Uncaught SyntaxError: Unexpected token import</p>
    
    <p>at the_path/test_entry.js:41</p>
  </blockquote>
  
  <p><em>test_entry.js</em> doesn't have 41 lines and doesn't contain import statements and anyway they should have been taken care of. What's going wrong?</p>
  
  <p>In case you want to know the webpack config as well:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// webpack.config.js, works perfectly for normal builds but not with Karma
  var path = require('path');
  var webpack = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
   debug: true,
   entry: {
    app: ['./app/index.js'],
    vendor: ['./app/vendor.js']
   },
   output: {
    path: path.join(__dirname, 'dist'),
    filename: 'js/[name].js'
   },
   plugins: [
    new HtmlWebpackPlugin({
     template: './app/index.html',
     inject: 'body',
     minify: false
    }),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'js/vendor.js'),
    new webpack.SourceMapDevToolPlugin({
     filename: '[file].map',
     exclude: /vendor/
    })
   ],
   resolve: {
    extensions: ['', '.js'],
    alias: {
     app: path.join(__dirname, 'app')
    }
   },
   module: {
    loaders: [
     {
      test: /\.js$/,
      loader: 'babel-loader',
      include: path.join(__dirname, 'app'),
      exclude: path.join(__dirname, 'node_modules')
     },
     {
      test: /\.html$/,
      loader: 'html-loader'
     }
    ]
   },
   resolveLoader: {
    root: path.join(__dirname, 'node_modules')
   },
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>In case you want to see my test, required by <em>test_entry.js</em>, which I can't get to run:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import jasmine from 'jasmine-core';
  import readableNumberFilter from './file_path/readableNumber.filter';
  
  // for some reason needed, or else unexpected token errors during build:
  var describe = jasmine.describe;
  var it = jasmine.it;
  var expect = jasmine.expect;
  
  describe('readableNumber Filter', function () {
   describe('readableNumber Filter formatting', () =&gt; {
    it('it should support optional arguments', function () {
     expect(readableNumberFilter("50.3")).toEqual("50,30");
    });
   });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p><strong>edit 20-7-2016</strong></p>
  
  <p>The problem persists with updated babel-loader dependencies as well  (including setting es2015 presets option). "babel-core": "^6.11.4", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0",</p>