seb seb - 1 month ago 29
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:

webpack.config.js

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'
}
]
}
};


gulpfile.js

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

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

"use strict";

return gulp.src('./resources/assets/source/js/app.js')
.pipe(webpack(require('./webpack.config.js')))
.pipe(gulp.dest('./public/assets/js/'));

});

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


resources/assets/source/js/app.js

var Vue = require('vue');

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

new Vue({

el: '#app',

components: { Alert },

ready() {
alert('ready');
}

});


resources/assets/source/js/components/Alert.vue

<template>

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

</template>

<script>

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'
};

}

}
};

</script>


When I rung
gulp
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
resources/assets/source/js/app.js
file.

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

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
}
Comments