karma-webpack: `SyntaxError: Use of reserved word 'import'` when using ES6 with Babel

I’m having a really hard time trying to setup testing in my application. We are using Angular, Webpack, ES6 with Babel.

My relevant files are as follows:

karma.conf.js

require('babel-core/register');
module.exports = require('./karma.conf.babel').default;

karma.conf.babel.js

import webpackDevConfig from './webpackDevConfig'

export default (config) => {
  config.set({
    frameworks: [
      'jasmine'
    ],

    files: [
        'test/test_index.js'
    ],

    preprocessors: {
        'test/test_index.js': ['webpack']
    },

    browsers: [
      'PhantomJS',
    ],

    singleRun: true,

    webpack: webpackDevConfig,

    webpackMiddleware: {
      noInfo: true
    }
  });
};

webpackDevConfig.js

export default (config) => {
    return {
        module: {
            loaders: [
                {
                    test: /\.js?$/,
                    exclude: /(node_modules)/,
                    loader: 'ng-annotate?map=false!babel-loader?cacheDirectory=true&presets[]=es2015',
                },
        // ... other loaders
            ],
        },
        // ... other config
    }
}

test/test_index.js

import 'angular';
import 'angular-mocks/angular-mocks';

const testsContext = require.context('.', true, /.spec$/);
testsContext.keys().forEach(testsContext);

Error is:

10 06 2016 17:34:11.421:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
10 06 2016 17:34:11.443:INFO [launcher]: Starting browser PhantomJS
10 06 2016 17:34:12.860:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#4wX21ZNf-Gdt6B2nAAAA with id 30689295
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Use of reserved word 'import'
  at /Users/rafael/myproject/test/test_index.js:47


npm ERR! Test failed.  See above for more details.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 31 (8 by maintainers)

Most upvoted comments

I’m experiencing this issue as well. Weird to see it hasn’t been fixed for almost 2 years

+21

Maximaximum on Apr 18, 2018

Vuejs, Webpack, Karma -> No preprocessing of both .js and .vue files.

kevinkleine on Dec 17, 2016

I started seeing this happening when I moved some folders around in my project. Updating the path in karma.conf.js fixed it.

preprocessors: {
      "../src/**/*.spec.ts*": ["webpack"]
    },

ImranAhmed on Dec 9, 2016

None of the solutions provided aboved worked for me. I can’t manage to make webpack preprocess my file. The only way I could run the test was using laravel-elixir webpack method to precompile the files and then pass the compiled to karma, without using preprocessors. But this isn’t a fix I would like to use, it’s messy and simply a lousy workaround. If anyone could take a look at my conf files and tell me what’s wrong in them I would appreciate it very much.

karma.conf.js

var webpackConfig = require('./webpack.config.js');
  //var webpackConfig = require('webpack');

  //webpackConfig.entry = {};

  module.exports = function(config) {
    config.set({

      // base path that will be used to resolve all patterns (eg. files, exclude)
      basePath: '../../../../..',


      // frameworks to use
      // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
      frameworks: ['jasmine'],


      // list of files / patterns to load in the browser
      files: [
        //'./www/l5-workbench/js/*.js',
        './resources/assets/js/tests/test-context.js'

      ],


      // list of files to exclude
      exclude: [
      ],


      // preprocess matching files before serving them to the browser
      // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
      preprocessors: {
          //'./resources/assets/js/app.js' : ['webpack'],
          './resources/assets/js/tests/test-context.js': ['webpack']
      },

      webpack: {
        config: webpackConfig
      },
      webpackServer: {
          noInfo: true
      },
      webpackMiddleware: {
          noInfo: true
      },


      // test results reporter to use
      // possible values: 'dots', 'progress'
      // available reporters: https://npmjs.org/browse/keyword/karma-reporter
      reporters: ['progress'],


      // web server port
      port: 9876,


      // enable / disable colors in the output (reporters and logs)
      colors: true,


      // level of logging
      // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
      logLevel: config.LOG_INFO,


      // enable / disable watching file and executing tests whenever any file changes
      autoWatch: true,


      // start these browsers
      // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
      browsers: [
        'PhantomJS'
      ],


      // Continuous Integration mode
      // if true, Karma captures browsers, runs the tests and exits
      singleRun: false,

      // Concurrency level
      // how many browser should be started simultaneous
      concurrency: Infinity
    })
  }

webpack.config.js

module.exports = {
  entry: './resources/assets/js/tests/test-context.js',
  output: {
      path: './resources/assets/js/xis',
      filename: 'app.bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: [
          './resources/assets/js/tests/test-context.js'
        ],
        // make sure to exclude 3rd party code in node_modules
        exclude: /node_modules/
      },
      {
        // edit this for additional asset file types
        test: /\.(png|jpg|gif)$/,
        loader: 'url',
        query: {
          // inline files smaller then 10kb as base64 dataURL
          limit: 10000,
          // fallback to file-loader with this naming scheme
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  babel: {
        presets: ['es2015', 'stage-2'],
        plugins: ['transform-runtime'],
    },
  // vue-loader config:
  // lint all JavaScript inside *.vue files with ESLint
  // make sure to adjust your .eslintrc
  vue: {
    loaders: {
      js: 'babel-loader'
    }
  }
}

package.json

{
  "name": "l5-workbench",
  "version": "1.6.19",
  "private": true,
  "devDependencies": {
    "webpack": "^1.13.3",
    "babel-loader": "^6.2.5",
    "babel-preset-stage-2": "^6.13.0",
    "babel-register": "^6.18.0",
    "bootstrap": "^3.0.0",
    "font-awesome": "^4.6.3",
    "jasmine": "^2.5.2",
    "jasmine-core": "^2.5.2",
    "jquery": "^2.1.4",
    "js-cookie": "^2.1.0",
    "karma": "^1.3.0",
    "karma-babel-preprocessor": "^6.0.1",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-webpack": "^1.8.0",
    "laravel-elixir": "^6.0.0-14",
    "laravel-elixir-eslint": "^3.0.0",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-vueify": "^2.0.0",
    "laravel-elixir-webpack-official": "^1.0.5",
    "latinize": "^0.2.0",
    "moment": "^2.10.6",
    "phantomjs": "^2.1.7",
    "promise": "^7.1.1",
    "sweetalert": "^1.1.3",
    "tablesorter": "~2.26.5",
    "underscore": "^1.8.3",
    "urijs": "^1.17.0",
    "vue": "^2.0.1",
    "vue-resource": "1.0.3",
    "vue-router": "^2.0.0",
    "vueify": "^9.2.4",
    "vuex": "2.0.0"

  },
  "dependencies": {
    "babel-cli": "^6.16.0",
    "babel-preset-es2015": "^6.16.0"
  },
  "eslintConfig": {
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true,
        "modules": true,
        "experimentalObjectRestSpread": true
      },
      "env": {
        "es6": true,
        "browser": true
      }
    },
    "globals": {
      "$": false,
      "handover": false
    }
  },
  "scripts": {
    "test": "babel-node ./spec/support/run.js"
  }
}

I’m sorry for dropping all this here but I really need someone to tell me what’s wrong. I’ve lost too many hours trying to make this work… thanks!

EDIT: I’m using laravel 5.3 as the base and Vue js 2 as the JS framework.

arquadrado on Nov 18, 2016

dganoff on Aug 18, 2016

+1 - same with typescript

evanjmg on Nov 24, 2016