SyntaxError: Unexpected token 'const' (with Vue, Karma, Webpack, PhantomJS)

The comments by @craig_h and @PanJunjie set me on the track of looking at the configuration for karma-babel-preprocessor, which led me to the config for karma-webpack. I'm still not sure what was causing the original problem, but it appears that my webpack config for Karma was incorrect or incomplete, and was failing silently. I added babel-loader and babel-preset-es2015 packages via

yarn add babel-loader babel-preset-es2015

And then I redid and cleaned up my karma.conf.js as such:

module.exports = function(config) {    config.set({        singleRun: false, // false => watch for changes and rerun tests        autoWatch: true, // enable / disable watching files & then run tests        frameworks: ['jasmine'],        browsers: ['PhantomJS'],        // Options: LOG_DISABLE, LOG_ERROR, LOG_WARN, LOG_INFO, LOG_DEBUG        logLevel: config.LOG_INFO,        basePath: './resources/assets/js/',        files: [            { pattern: 'tests/**/*.spec.js', watched: false },        ],        // how to process files before serving them to the browser for testing        preprocessors: {            'app.js': ['webpack'],            'tests/**/*.spec.js': ['webpack'],        },        webpack: {            module: {                loaders: [                    { test: /\.vue$/, loader: 'vue' },                    { test: /\.js$/,                      loader: 'babel-loader',                      exclude: /node_modules/,                      query: { presets: ['es2015'] }                    }                ]            },            // make sure to use the stand-alone version of Vue            resolve: {                alias: {vue: 'vue/dist/vue.js'}            }        },        webpackMiddleware: {          noInfo: true,          stats: 'errors-only'        }    });};

My package.json now looks like this:

{  "private": true,  "scripts": {    "prod": "gulp --production",    "dev": "gulp watch"  },  "devDependencies": {    "bootstrap-sass": "^3.3.7",    "gulp": "^3.9.1",    "jquery": "^3.1.0",    "laravel-elixir": "^6.0.0-11",    "laravel-elixir-vue-2": "^0.2.0",    "laravel-elixir-webpack-official": "^1.0.2",    "lodash": "^4.16.2",    "vue": "^2.0.1",    "vue-resource": "^1.0.3"  },  "dependencies": {    "babel-loader": "^6.2.8",    "babel-preset-es2015": "^6.18.0",    "jasmine-core": "^2.5.2",    "karma": "^1.3.0",    "karma-babel-preprocessor": "^6.0.1",    "karma-chrome-launcher": "^2.0.0",    "karma-firefox-launcher": "^1.0.0",    "karma-jasmine": "^1.0.2",    "karma-phantomjs-launcher": "^1.0.2",    "karma-webpack": "^1.8.0"  }}

With all of that, I can now use all of the ES2015 goodness like const and () => {}. Sorry to answer my own question, but I hope this helps someone else that encounters a similar issue.

I had a similar problem (though not identical; your configuration is pretty specific). I was also using Vue, karma, webpack, and phantomjs (as configured in the vue-Webpack template).

However, my problem is that I was defining const in a helper file that was getting imported into my app. When I changed const to var in that file, the tests were able to run.(It didn't matter whether or not const was used in other files that were already within the src directory).

This problem was fixed when I moved this helper file into my src folder or one of its subdirectories. I'm too much of a novice to know why this solved the problem, but I'm guessing that babel wasn't configured to work in the root folder, and was only pointed towards the src folder.

Hopefully this is helpful for others as well.

In addition to RyanQuey's comment: he is right. The default Vue + Webpack CLI set-up only includes certain contexts to be handled by the babel-loader. Look into build/webpack.base.conf.js and then to the module rule for JS-files. You can see that only the src, test and node_modules/webpack-dev-server/client paths are included (at the time of this writing).