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

Question

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 1

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
}

Answer 2

import issue seems to be solved in the comments above but there's one more.

.vue files do not seem to be written in standard JavaScript syntax. In order to import them, we need to somehow transform them to JavaScript.

While looking at the webpack.config.js you might notice, that files with .vue extension do not get transpiled in any way.

You can solve this problem with custom loaders. In this case, the loader you're looking for is vue-loader

Steps to solve the issue:

• npm install --save-dev vue-loader
• once done, try updating your webpack.config.js with following module section:

module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', query: { presets: ['es2015'] } }, { test: /\.vue$/, loader: 'vue' }, ], }

More details:

• http://vue-loader.vuejs.org/en/index.html

Does it help in any way? If not, please let me know.