How to use es2020 features in vue 2.6 project?

Question

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 compile with 1 error                                                                                                           12:59:10

 error  in ./src/components/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/components/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-compiler": "^2.6.12"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }
...
}

Please, help me!

Answer 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 comment 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 compiled 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.

Answer 2

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 compatibility. 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.

Answer 3

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

Answer 4

@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.