I have a Vue 2.6 project and I want to use the es2020 characteristics like optional chaining in my project but I can't get it to work in my project. I'm getting the following error.

> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to pile with 1 error                                                                                                           12:59:10

 error  in ./src/ponents/list/columns/lastUpdate.vue?vue&type=script&lang=js&

Module parse failed: Unexpected token (15:20)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       if (!this.data.ObjInst || !this.data.ObjInst.Last_Update) return '';
| 
>       if (this.data?.ObjInst) {
|         console.log("Hello");
|       }

 @ ./src/ponents/list/columns/lastUpdate.vue?vue&type=script&lang=js& 1:0-349 1:365-368 1:370-716 1:370-716
 .
 .
 .
 .
 .
 @ ./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/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.21:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I have installed babel pluging but I'm getting the same error.

npm install --save-dev @babel/plugin-proposal-optional-chaining

I have been googling but I have not found any info about it.

These are my project's dependencies

{
...
  "dependencies": {
    "core-js": "^2.6.11",
    "jwt-decode": "^2.2.0",
    "vue": "^2.6.12",
    "vue-i18n": "^8.24.2",
    "vue-multiselect": "^2.1.6",
    "vue2-admin-lte": "^0.4.3",
    "vue2-daterange-picker": "^0.6.1"
  },
  "devDependencies": {
    "@kazupon/vue-i18n-loader": "^0.3.0",
    "@vue/cli-plugin-babel": "^3.12.1",
    "@vue/cli-plugin-eslint": "^3.12.1",
    "@vue/cli-service": "^3.12.1",
    "babel-eslint": "^10.1.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-i18n": "^0.6.1",
    "vue-template-piler": "^2.6.12"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:remended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }
...
}

Please, help me!

I have a Vue 2.6 project and I want to use the es2020 characteristics like optional chaining in my project but I can't get it to work in my project. I'm getting the following error.

> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to pile with 1 error                                                                                                           12:59:10

 error  in ./src/ponents/list/columns/lastUpdate.vue?vue&type=script&lang=js&

Module parse failed: Unexpected token (15:20)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       if (!this.data.ObjInst || !this.data.ObjInst.Last_Update) return '';
| 
>       if (this.data?.ObjInst) {
|         console.log("Hello");
|       }

 @ ./src/ponents/list/columns/lastUpdate.vue?vue&type=script&lang=js& 1:0-349 1:365-368 1:370-716 1:370-716
 .
 .
 .
 .
 .
 @ ./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/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.21:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I have installed babel pluging but I'm getting the same error.

npm install --save-dev @babel/plugin-proposal-optional-chaining

I have been googling but I have not found any info about it.

These are my project's dependencies

{
...
  "dependencies": {
    "core-js": "^2.6.11",
    "jwt-decode": "^2.2.0",
    "vue": "^2.6.12",
    "vue-i18n": "^8.24.2",
    "vue-multiselect": "^2.1.6",
    "vue2-admin-lte": "^0.4.3",
    "vue2-daterange-picker": "^0.6.1"
  },
  "devDependencies": {
    "@kazupon/vue-i18n-loader": "^0.3.0",
    "@vue/cli-plugin-babel": "^3.12.1",
    "@vue/cli-plugin-eslint": "^3.12.1",
    "@vue/cli-service": "^3.12.1",
    "babel-eslint": "^10.1.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-i18n": "^0.6.1",
    "vue-template-piler": "^2.6.12"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:remended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }
...
}

Please, help me!

• javascript
• vue.js
• ecmascript-2020

Share Improve this question Follow asked Apr 27, 2021 at 11:25 LoopLoop 7311 silver badge77 bronze badges 1

• Installing @babel/plugin-proposal-optional-chaining doesn't help anything as this doesn't affect whether it's used or not. See cli.vuejs/config/#babel and github./vuejs/vue-cli/tree/dev/packages/%40vue/… . I wouldn't expect problems in default Vue CLI config, so the problem may be specific to your project. – Estus Flask Commented Apr 27, 2021 at 14:58

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

I don't think so you can achieve that, unless you will implement it by yourself. ES2020 features such an optional chaining are available in Vue 3, but not Vue 2.x.

More information can be found here

UPDATE 20.07.2023

From ment below (@DMack):

For anyone finding this question post-2.7, this should be a non-issue now. From the 2.7 release notes: [Vue 2.7] supports using ESNext syntax in template expressions. When using a build system, the piled template render function will go through the same loaders / plugins configured for normal JavaScript. This means if you have configured Babel for .js files, it will also apply to the expressions in your SFC templates.

From what I understand, this is because the standard setup for Vue projects uses Babel/Webpack to transpile code into something that can be run in the browser (i.e., Vue templates to render functions) and add polyfills for newer features for backwards patibility. Vue 2 uses Babel 6/Webpack 4, and they moved to Babel 7/Webpack 5 in Vue 3.

@vue/cli currently has a beta version out that manages the upgrades to Babel/Webpack, but it may require you to rewrite some configuration.

As @aweston mentioned, this is because of Webpack.

Optional-chaining entered not so long time ago to Acorn, and Webpack (which depends on it) supports it only since ver. 5 (which is available in @vue/cli ver. 5, still in beta).

You can use it in webpack ver. 4 as well, but be prepared to tweak some babel in your project (it's not difficult!)

You should further read this issue in github assigning exactly your problem

@Loop, add the below webpack object (chainedWebpack) in the vue.config.js file:

module.exports = {  
 chainWebpack: config => {
  config.module
  .rule('vue')
  .test(/\.vue$/)
  .use('vue-loader')
    .loader('vue-loader')
    .tap(options => {
      // modify the options...
      return options
    })
  .end()
  .use('vue-style-loader')
  .loader('vue-style-loader')
  .end()
 }
}

Do let me know if it works for you.