Optional chaining not working (no, not in the template)

Version

15.9.2

Reproduction link

[Bogus link removed] Seriously, why do you make it so hard to submit a simple issue???

Steps to reproduce

I am trying to use the optional chaining operator inside one of my methods:

methods: {
  fetchJobs() {
    ...
    if (res.jobs?.length) { ... }
    ...
  }
}

I have the latest versions of Vue (2.6.11) and Vue CLI (4.4.6). My package-lock tells me Vue CLI pulled in vue-loader version 15.9.2. I also use SFC. I do not use TypeScript. I do not have any special Babel config or extra plugins. It makes no sense to me that I can use other modern parts of js, but something is barfing on the optional chaining operator.

What is expected?

My code would compile.

What is actually happening?

My code fails to compile and Vue CLI outputs this error (doesn’t like the optional chaining operator):

 Building for development...

 ERROR  Failed to compile with 1 errors                                                                                3:41:18 PM

 error  in ./src/views/benchmarks.vue?vue&type=script&lang=js&

Module parse failed: Unexpected token (258:23)
File was processed with these loaders:
 * ./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.
|       api.getjobs()
|         .then(res => {
>           if (res.jobs?.length) {
|             this.jobs = res.jobs
|               // Filter out completed jobs

 @ ./src/views/benchmarks.vue?vue&type=script&lang=js& 1:0-179 1:195-198 1:200-376 1:200-376
 @ ./src/views/benchmarks.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [redacted]@0.1.0 build:dev: `vue-cli-service build --mode development --dest ../server/public --no-clean --watch`

---

I am under the impression this should work because 1) this is just vanilla js!!!, 2) Babel, which I think vue-loader is using, supports the optional chaining operator, and 3) it’s not in the template which won’t be supported until Vue 3.

I tried explicitly adding @vue/cli-plugin-babel": "^4.4.6" to my project and that didn’t change anything.

Please help!

[Liwoj]

Encountered same error after I changed my .browserlistrc to support only modern browsers (Vue CLI 4)

Changing babel.config.js fixed the problem:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  plugins: ['@babel/plugin-proposal-nullish-coalescing-operator', '@babel/plugin-proposal-optional-chaining'],
}

[jfbrennan]

@sodatea 11088 issue is concerned with in the template, my issue is not in the template (see title and description). The problem looks like it’s in vue-loader. Please read and reopen.