.vue files not compiling as expected

Question

I am trying to dev-build a Vue project with Webpack. As soon as I add script tag in the App.vue file, I get an error in the browser saying Unexpected token export.

//App.vue
<template>
    <p style="background-color:blue,">Hello World!</p>
</template>

<!-- works perfectly fine without this script tag -->
<script>
    export default {
        name    : 'app'
    }
</script>

<style>
    h1 {
        color               : white;
        background-color    : darkgreen
    }
</style>

The webpack configuration :

//webpack.config.js
const HTMLPlugin    = require('html-webpack-plugin')
const webpack       = require('webpack')
//
const BabelLoader = {
    loader  : 'babel',
    test    : /\.js$/,
    exclude : /node_modules/,
    query   : {
        presets : [ 'es2015', 'stage-2'],
        plugins: [ 'transform-runtime' ]
    }
}
const VueLoaderConfig = {
    loader  : 'vue',
    test    : /\.vue$/,
    exclude : /node_module/
}
//
const HTMLPluginConfig      = new HTMLPlugin({
            template    : './src/index.html'
        })
const CommonsChunkConfig    = new webpack.optimize.CommonsChunkPlugin({
    name    : [ 'vendor', 'bootstrap' ]
})
//
const config    = {
    // ENTRY
    entry   : {
        app     : './src/app.js',
        vendor  : [ 'vue' ]
    },  
    // OUTPUT
    output  : {
        filename    : '[name].[chunkhash].js',
        path        : __dirname + '/dist'
    },
    // PLUGINS
    plugins : [
        HTMLPluginConfig,
        CommonsChunkConfig
    ],
    // MODULE
    module  : {
        loaders : [
            BabelLoader,
            VueLoaderConfig
        ]
    }
}
//
module.exports = config

The entry point - app.js

//app.js
import Vue from 'vue'
//
import App from './App.vue'
//
new Vue({
    el          : '#app',
    ...App
})

Note:

• It works perfectly fine until I add the <script> tag in the App.vue file.

Please advice me what could I be missing.

Thanks in advance.

Answer 1

Overall solution :

1. install webpack2 (since some features will not work with webpack-1)

npm i -D [email protected]

2. in webpack config, here are the loader configs :

const BabelLoaderConfig 
    = {
        loader  : 'babel-loader',
        test    : /\.js$/,
        exclude : /node_modules/,
        query   : {
            presets : [ 'latest', 'stage-2' ]
        }
    }
const VueLoaderConfig 
    = {
        loader  : 'vue-loader',
        test    : /\.vue$/,
        exclude : /node_modules/
    }

Here's a full list of dependencies in package.json -

...
"devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-stage-2": "^6.18.0",
    "babel-runtime": "^6.20.0",
    "css-loader": "^0.26.1",
    "html-webpack-plugin": "^2.26.0",
    "vue-loader": "^10.0.2",
    "vue-template-compiler": "^2.1.8",
    "webpack": "^2.2.0-rc.3"
  }
  ...

Good Luck.

Answer 2

I think it's because you are using the stage-2 preset and export extensions are part of stage-1 which isn't included in stage-2, so you can either use stage-1:

npm install --save-dev babel-preset-stage-1

presets : [ 'es2015', 'stage-1']

remove the stage presets altogether, or just use module.exports.