seb seb - 1 year ago 640
Javascript Question

Gulp, Vue, Webpack, Babel and Uncaught SyntaxError: Unexpected token import

I've been trying whole day to get it to work without any luck so if someone could shine some light that would be very much appreciated.

I'm trying to set up environment for working with ES6 files as well as Vue using Webpack.

I've installed all dependencies, and created the following files:


module.exports = {

entry: './resources/assets/source/js/app.js',
output: {
filename: 'app.js'
devtool: 'source-map',
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
module: {
loaders: [
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['es2015']
test: /\.vue$/,
loader: 'vue'


var gulp = require('gulp'),
webpack = require('webpack-stream');

gulp.task('script', () => {

"use strict";

return gulp.src('./resources/assets/source/js/app.js')


gulp.task('default', ['script']);


var Vue = require('vue');

import Alert from './components/Alert.vue';

new Vue({

el: '#app',

components: { Alert },

ready() {




<div :class="alertClasses" v-show="show">
<span class="Alert__close" @click="show == false">x</span>



export default {

props: ['type'],

data() {
return {
show: true

computed: {

alertClasses() {

var type = this.type;

return {
'Alert': true,
'Alert--Success': type == 'success',
'Alert--Error': type == 'error'




When I rung
everything is bundled and compiled, but when I run it in the browser I get
Uncaught SyntaxError: Unexpected token import
pointing to the line within the

After hours of trying to figure out what might be causing it I've run out of ideas and am on the verge of giving up so would appreciate any help.

Answer Source

You should remove query object from your webpack.config.js file, and create .babelrc file, that would contain this stuff.

  "presets": ["es2015"],
  "plugins": ["transform-runtime"],
  "comments": false
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download