I am just starting out with vueJs. I attempted to use this basic code in my vue project to update the data of a component:
<template>
<div>
<h1> {{ message }}
<h2> Hello {{ firstname }} {{ lastname }} from {{ from }} ! </h2>
<label> Firstname : <input type="text" v-model="person.firstname" /> </label>
<label> Lastname : <input type="text" v-model="person.lastname" /> </label>
<label> Message : <input type="text" v-model="message" /> </label>
</div>
</template>
<script>
export default {
data () {
person: {
firstname: 'John',
lastname: 'Doe'
},
message: 'Welcome!'
}
}
</script>
Upon testing, I encountered this error message:
Failed to compile.
./src/components/Hello.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Hello.vue?vue&type=script&lang=js&)
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\1900780\Documents\Afpa\Ressources\PHP\vueJs1\myproject\src\components\Hello.vue: Unexpected token, expected ";" (16:16)
14 | person: {
15 | firstname: 'John',
> 16 | lastname: 'Doe'
| ^
17 | },
18 | message: 'Welcome!'
19 | }
at Object.raise (C:\Users\...\vueJs1\myproject\node_modules\@babel\parser\lib\index.js:7013:17)
at Object.unexpected (C:\Users\...\vueJs1\myproject\node_modules\@babel\parser\lib\index.js:8384:16)
at Object.semicolon (C:\Users\...\vueJs1\myproject\node_modules\@babel\parser\lib\index.js:8366:40)
at Object.parseExpressionStatement (C:\Users\...\vueJs1\myproject\node_modules\@babel\parser\lib\index.js:11193:10)
at Object.parseStatementContent (C:\Users\...\vueJs1\myproject\node_modules\@babel\parser\lib\index.js:10792:19)
at Object.parseStatement (C:\Users\...\vueJs1\myproject\node_modules\@babel\parser\lib\index.js:10658:17)
at Object.parseLabeledStatement (C:\Users\...\vueJs1\myproject\node_modules\@babel\parser\lib\index.js:11185:22)
at Object.parseStatementContent (C:\Users\...\vueJs1\myproject\node_modules\@babel\parser\lib\index.js:10790:19)
at Object.parseStatement (C:\Users\...\vueJs1\myproject\node_modules\@babel\parser\lib\index.js:10658:17)
at Object.parseBlockOrModuleBlockBody (C:\Users\...\vueJs1\myproject\node_modules\@babel\parser\lib\index.js:11234:25)
at Object.parseBlockBody (C:\Users\...\vueJs1\myproject\node_modules\@babel\parser\lib\index.js:11221:10)
at Object.parseBlock (C:\Users\...\vueJs1\myproject\node_modules\@babel\parser\lib\index.js:11205:10)
at Object.parseStatementContent (C:\Users\...\vueJs1\myproject\node_modules\@babel\parser\lib\index.js:10734:21)
at Object.parseStatement (C:\Users\...\vueJs1\myproject\node_modules\@babel\parser\lib\index.js:10658:17)
at Object.parseLabeledStatement (C:\Users\...\vueJs1\myproject\node_modules\@babel\parser\lib\index.js:11185:22)
at Object.parseStatementContent (C:\Users\...\vueJs1\myproject\node_modules\@babel\parser\lib\index.js:10790:19)
I am using @vue/cli 4.1.2 along with webpack. Here is a snippet from my package.json file:
{
"name": "myproject",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.4.4",
"vue": "^2.6.10"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-eslint": "^4.1.0",
"@vue/cli-service": "^4.1.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 6
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
I have checked my code and it seems correct. I'm not sure why this error is occurring. Is there any specific configuration required for the babel parser? Where can I find the config file? I added an ecma version in the package.json file configuration, but it doesn't seem to be solving the issue. Any assistance on this matter would be highly appreciated.