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

[jfbrennan]

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!

[haoqunjiang]

vuejs/vue#11088

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

[haoqunjiang]

Then you need to provide a reproduction repo. It works for most people.

[haoqunjiang]

A misconfigured tsconfig.json can also lead to this issue. See vuejs/vue-cli#4738 (comment)

[jfbrennan]

I suppose most people use Babel and have the Babel plugin and that's why it works for them. I don't want to have to do all that just to get totally valid JavaScript to work. And I also "do not use TypeScript," so it's not a ts config issue. One of the reasons I avoid Babel and TS is to minimize these kinds of time-wasting issues.

The error I shared leads me to believe that out-of-the-box whatever Vue CLI (or vue-loader) comes with and its default config does not support optional chaining. Perhaps it's as simple as an internal version bump?

[jfbrennan]

Here's my package.json if that helps:

{
  "name": "my-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "vue-cli-service build --dest ../server/public --no-clean",
    "build:dev": "vue-cli-service build --mode development --dest ../server/public --no-clean --watch",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "flat": "^5.0.0",
    "vega-lite": "^4.11.0",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-router": "^4.4.6",
    "@vue/cli-plugin-unit-jest": "^4.4.6",
    "@vue/cli-service": "^4.4.6",
    "@vue/test-utils": "1.0.0-beta.33",
    "canvas": "^2.6.1",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 10%",
    "last 2 versions",
    "not dead"
  ],
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest/presets/no-babel",
    "collectCoverage": true,
    "collectCoverageFrom": [
      "src/**/*.{js,vue}"
    ],
    "coverageReporters": [
      "html",
      "text-summary"
    ],
    "globals": {
      "vue-jest": {
        "babelConfig": {
          "plugins": [
            "babel-plugin-transform-es2015-modules-commonjs"
          ]
        }
      }
    }
  }
}

[jfbrennan]

Vue info as well:

Environment Info:

  System:
    OS: macOS 10.15.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 13.12.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 84.0.4147.89
    Edge: 84.0.522.40
    Firefox: 74.0.1
    Safari: 13.1
  npmPackages:
    @vue/cli-overlay:  4.4.6 
    @vue/cli-plugin-router: ^4.4.6 => 4.4.6 
    @vue/cli-plugin-unit-jest: ^4.4.6 => 4.4.6 
    @vue/cli-plugin-vuex:  4.4.6 
    @vue/cli-service: ^4.4.6 => 4.4.6 
    @vue/cli-shared-utils:  4.4.6 
    @vue/component-compiler-utils:  3.1.2 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/test-utils: 1.0.0-beta.33 => 1.0.0-beta.33 
    @vue/web-component-wrapper:  1.2.0 
    jest-serializer-vue:  2.0.2 
    vue: ^2.6.11 => 2.6.11 
    vue-hot-reload-api:  2.3.4 
    vue-jest:  3.0.6 
    vue-loader:  15.9.3 
    vue-router: ^3.1.6 => 3.1.6 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.4.6

[haoqunjiang]

It's webpack that can't yet parse such syntax webpack/webpack#11198

[jfbrennan]

@sodatea ok, thanks!

[wpitallo]

This should be re-opened its not working without typescript

[jfbrennan]

@sodatea

It's webpack that can't yet parse such syntax webpack/webpack#11198

Optional chaining is only in Webpack v5. Looks like Vue Loader is on v4. When is will Vue Loader move to v5?

[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'],
}