0

I'm trying to add Vue.js into an MVC 5 project with all the benefits of webpack transpiling. I've used the two links below as references to combine into one project...

MVC 5 ES6 Project
https://www.slightedgecoder.com/2017/05/22/setting-es6-environment-asp-net-mvc-5/

Core 2 Vue.js Project
https://github.com/MarkPieszak/aspnetcore-Vue-starter

However, I'm getting this error below after combining:

ERROR

ERROR in ./ClientApp/app.js
1>      Module build failed: SyntaxError: C:/Users/rich/source/repos/VueMvcTest/aspnetcore-Vue-starter-master/Vue2Mvc5/ClientApp/app.js: Unexpected token (19:4)
1>      
1>        17 |     store,
1>        18 |     router,
1>      > 19 |     ...App
1>           |     ^
1>        20 | });
1>        21 | 
1>        22 | export {
1>      
1>       @ ./ClientApp/boot-app.js 9:11-27

Boot-app.js

import './css/site.css';
import 'core-js/es6/promise';
import 'core-js/es6/array';

import { app } from './app';

app.$mount('#app');

app.js

import Vue from 'vue'
import axios from 'axios'
import router from './router/index'
import store from './store'
import { sync } from 'vuex-router-sync'
import App from 'components/app-root'
//import { FontAwesomeIcon } from './icons'

// Registration of global components
//Vue.component('icon', FontAwesomeIcon)

Vue.prototype.$http = axios

sync(store, router)

const app = new Vue({
  store,
  router,
  ...App
})

export {
  app,
  router,
  store
}

webpack.config.js

const path = require('path');

module.exports = () => {

    const isDevBuild = !(process.env.NODE_ENV && process.env.NODE_ENV === 'production');

    return [{
        stats: { modules: false },
        entry: { 'main': './ClientApp/boot-app.js' },
        output: {
            path: path.resolve(__dirname, './Scripts/dist'),
            filename: 'bundle.js'
        },
        // IMPORTANT NOTE: If you are using Webpack 2, replace "loaders" with "rules"
        module: {
            rules: [
                {
                    loader: 'babel-loader',
                    test: /\.js$/,
                    exclude: /node_modules/
                },
                { test: /\.vue$/, include: /ClientApp/, use: 'vue-loader' },
                { test: /\.js$/, include: /ClientApp/, use: 'babel-loader' },
                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader' }) },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        resolve: {
            extensions: ['.js', '.vue'],
            alias: isDevBuild ? {
                'vue$': 'vue/dist/vue',
                'components': path.resolve(__dirname, './ClientApp/components'),
                'views': path.resolve(__dirname, './ClientApp/views'),
                'utils': path.resolve(__dirname, './ClientApp/utils'),
                'api': path.resolve(__dirname, './ClientApp/store/api')
            } : {
                    'components': path.resolve(__dirname, './ClientApp/components'),
                    'views': path.resolve(__dirname, './ClientApp/views'),
                    'utils': path.resolve(__dirname, './ClientApp/utils'),
                    'api': path.resolve(__dirname, './ClientApp/store/api')
                }
        }
    }];
};

package.json

{
  "name": "vue2mvc5",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "npm-watch",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "axios": "^0.15.3",
    "core-js": "^2.5.3",
    "vue": "^2.5.16",
    "vue-router": "^2.8.1",
    "vue-server-renderer": "^2.5.16",
    "vue-template-compiler": "^2.5.16",
    "vuex": "^2.5.0",
    "vuex-router-sync": "^4.3.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "npm-watch": "^0.3.0",
    "webpack": "^4.9.1",
    "webpack-cli": "^2.1.4",
    "@fortawesome/fontawesome": "^1.1.4",
    "@fortawesome/fontawesome-free-brands": "^5.0.8",
    "@fortawesome/fontawesome-free-solid": "^5.0.8",
    "@fortawesome/vue-fontawesome": "0.0.22",
    "aspnet-webpack": "^2.0.3",
    "babel-eslint": "^8.2.2",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "bootstrap": "^4.0.0",
    "cross-env": "^3.2.4",
    "css-loader": "^0.26.4",
    "eslint": "^4.18.2",
    "eslint-config-standard": "^11.0.0",
    "eslint-plugin-html": "^4.0.2",
    "eslint-plugin-import": "^2.9.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-standard": "^3.0.1",
    "event-source-polyfill": "0.0.7",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.9.0",
    "font-awesome": "^4.7.0",
    "jquery": "^2.2.4",
    "node-sass": "^4.8.2",
    "optimize-css-assets-webpack-plugin": "^1.3.2",
    "popper.js": "^1.14.1",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.9",
    "vue-loader": "^14.2.2",
    "webpack-hot-middleware": "^2.21.2"
  },
  "babel": {
    "presets": [
      "env"
    ]
  },
  "watch": {
    "build": "ClientApp/*.js"
  }
}

enter image description here

2 Answers 2

2
+50

Adjust your webpack.config.js:

{
    loader: 'babel-loader',
    test: /\.js$/,
    exclude: /node_modules/,
    query: {
        presets: ["es2015", "stage-2"],
        comments: false
    }
}

This way it should include stage-2 in your project upon compiling.

Sign up to request clarification or add additional context in comments.

1 Comment

That solved it! and I had some other stuff missing that I figured out on my own and it's all working now - thanks!!
1

It seems like the spread operator ... is not enabled. In your package.json try switching to babel-preset-stage-3 it includes the transform-object-rest-spread plugin babel-preset-stage-3. If you'd like to investigate into this further this is a good post talking about the enabling the spread operator.

Unexpected token on spread operator

1 Comment

Stage2 should be working aswell, maybe it's a webpack.config.js issue. Perhaps he's missing stage-2 inside the babel module query.presets

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.