As a C# backend developer, I am venturing into the world of Vue.js. I typically work with Visual Studio 2017 + ASP.NET MVC (using it as an API + one layout) + Vue.js + Webpack.
.vue single-page component files are loaded by vue-loader, while .js files are loaded by babel-loader with the es2015 preset.
Although app.js transpiles successfully into the output dist/script.js file using Babel, I keep getting syntax errors with my .vue files no matter what combinations I try. I even face the same error when my navigation.vue file is completely empty:
ERROR in ./assets/component/navigation.vue
Module build failed: SyntaxError: Unexpected token {
My Task Runner Explorer setup looks like this:
https://i.sstatic.net/hI8d2.png
nagivation.vue:
<template>
<div>
{{ greeting }}
</div>
</template>
<script>
export default {
data: {
greeting: 'Hello World'
}
}
</script>
app.js:
import Vue from "../vendor/vue.js";
Vue.component("navigation", require("../component/navigation.vue"));
const app = new Vue({
el: "#app"
});
webpack.config.js:
module.exports = {
entry: "./assets/core/app.js",
output: {
filename: "./dist/script.js"
},
module: {
loaders: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
presets: ["es2015"]
}
},
{
test: /\.vue$/,
loader: "vue-loader"
}
]
},
resolve: {
extensions: ["*", ".js", ".vue"]
},
plugins: [
new NotifierPlugin()
]
};
package.json:
{
"version": "1.0.0",
"name": "helloworld",
"private": true,
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-vue": "^1.2.1",
"clean-webpack-plugin": "^0.1.17",
"webpack": "^3.8.1"
},
"dependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.2",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"css-loader": "^0.28.7",
"eslint": "^4.10.0",
"eslint-cli": "^1.1.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-react": "^7.4.0",
"vue-loader": "^13.5.0",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.3",
"webpack-notifier": "^1.5.0"
}
}
What could be causing this puzzling error? How do people usually go about debugging such issues?