Webpack Vue-loader Gives "unexpected Token {" For Single-page .vue Component

I am primarily a C# backend developer and trying to learn Vue.js. I use Visual Studio 2017 + ASP.NET MVC (as API + one layout) + Vue.js + Webpack. .vue single-page component files

Solution 1:

The error likely isn't coming from your .vue file but from vue-loader itself. If you are using vue-loader >= 13.1 (and possibly one of the vue-loader 12 versions) then you will need to ensure you have node 6.2 or above on your machine, because vue-loader uses features that only became available in that version. You can check your node version by running:

node --version

If you can't update your node version then try installing one of the earlier releases of vue-loader by doing:

npm install vue-loader@13.0.1 --save-dev

And hopefully the error should go away.

As a side note, you should also start using babel-preset-env rather than babel-preset-2015 as that has now been (or is being) deprecated.