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!

Americana

Installing @babel/plugin-proposal-optional-chaining doesn't help anything as this doesn't affect whether it's used or not. See cli.vuejs.org/config/#babel and github.com/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. – Namhoi

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.

Wylen

This is not true. The issue applies only to Vue templates because they are compiled differently than <script> part. The question explicitly lists the code that is not a part of a template. – Namhoi

@Wylen thank you so much. I didn't know templates are compiled in a different way. Interesting. – Americana

@EstusFlask, You are right that code rendered in the HTML is limited, but OP has some script, so it's irrelevant – Ritz

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. – Kippar

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.

Carry

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

Ritz

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.

Guidotti