Vue-loader: 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!

[sodatea]

https://github.com/vuejs/vue/issues/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.

[sodatea]

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

[sodatea]

A misconfigured tsconfig.json can also lead to this issue. See https://github.com/vuejs/vue-cli/issues/4738#issuecomment-565057952

[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

[sodatea]

It's webpack that can't yet parse such syntax https://github.com/webpack/webpack/pull/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'],
}

[atflick]

I spent several hours on this today and what ultimately worked for me was setting the presets and plugins directly in the webpack rule:
```
{ test: /.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@vue/cli-plugin-babel/preset', '@babel/preset-env'],
plugins: ['@babel/plugin-proposal-optional-chaining']
}
},
}

[jfbrennan]

Have tried some of the workarounds and none seem to work for my minimal setup. This needs to be reopened and resolved inside Vue Loader itself by updating to Webpack 5, which is required for optional chaining support.

@sodatea is there something preventing the upgrade to WP5?

[sodatea]

@jfbrennan Vue Loader has supported webpack 5 for a while.
If you are using Vue CLI, v5 alpha is based on webpack 5.

[smitpatelx]

/*
 * Where to use: Use in vue templates to determine deeply nested undefined/null values
 * How to use: Instead of writing parent?.child?.child2 you can write
 *            isAvailable(parent, 'child.child2')
 * @author    Smit Patel
 * @params    {Object} parent
 *            {String} child
 * @return    {Boolean}     True if all the nested properties exist
 */
export default function isAvailable(parent, child) {
  try {
    const childArray = String(child).split('.');
    let evaluted = parent;
    childArray.forEach((x) => {
      evaluted = evaluted[x];
    });
    return !!evaluted;
  } catch {
    return false;
  }
}

Use :

<template>
  <div>
    <span :v-if="isAvailable(data, 'user.group.name')">
      {{ data.user.group.name }}
    <span/>
  </div>
</template>
<script>
import isAvailable from 'file/path';
export default {
   methods: { isAvailable }
}
</script>

[JuniorTour]

Try vue-template-babel-compiler

It will enable Optional Chaining(?.), Nullish Coalescing(??) and many new ES syntax for Vue.js SFC based onBabel.

Github Repo: vue-template-babel-compiler

DEMO

Usage

Please refer to REAMDE for detail usage

Support for Vue-CLI, Nuxt.js, Webpack , any environment use vue-loader.