Optional Chaining not working

Version

4.5.11

Environment info

  System:
    OS: macOS 11.1
    CPU: (16) x64 Intel(R) Xeon(R) W-2140B CPU @ 3.20GHz
  Binaries:
    Node: 13.12.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.10 - /usr/local/bin/npm
  Browsers:
    Chrome: 88.0.4324.150
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.0.2
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.0.3 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.11 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  4.5.11 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.11 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.11 
    @vue/cli-plugin-router:  4.5.11 
    @vue/cli-plugin-unit-jest: ~4.5.0 => 4.5.11 
    @vue/cli-plugin-vuex: ~4.5.0 => 4.5.11 
    @vue/cli-service: ~4.5.0 => 4.5.11 
    @vue/cli-shared-utils:  4.5.11 
    @vue/component-compiler-utils:  3.2.0 
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/test-utils: ^1.0.3 => 1.1.3 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^6.2.2 => 6.2.2 
    jest-serializer-vue:  2.0.2 
    vue: ^2.6.11 => 2.6.12 
    vue-cal: ^3.7.0 => 3.10.0 
    vue-eslint-parser:  7.4.1 
    vue-flickity: ^1.2.1 => 1.2.1 
    vue-hot-reload-api:  2.3.4 
    vue-jest:  3.0.7 
    vue-loader:  15.9.6 (16.1.2)
    vue-router:  3.5.1 
    vue-server-renderer:  2.6.12 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.12 
    vue-template-es2015-compiler:  1.9.1 
    vue2-google-maps: ^0.10.7 => 0.10.7 
    vuepress: ^1.7.1 => 1.8.0 
    vuepress-html-webpack-plugin:  3.2.0 
    vuepress-plugin-container:  2.1.5 
    vuepress-plugin-smooth-scroll:  0.0.3 
    vuex: ^3.4.0 => 3.6.2 
  npmGlobalPackages:
    @vue/cli: 4.5.11

Steps to reproduce

vue-cli-service build

What is expected?

build to succeed

What is actually happening?

build failed

---

error in ./src/components/TheNavbar.vue?vue&type=script&lang=js&

Module parse failed: Unexpected token (86:31) File was processed with these loaders:

• ./node_modules/cache-loader/dist/cjs.js
• ./node_modules/thread-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. | | hasContactNumber() {

  return this.$store.state?.location?.contact_no;

| },

[matthewsuan]

Ya it was an issue with @vue/cli-plugin-babel/preset.

All the default browser targets in the said preset now supports optional chaining.

So Babel did not compile with optional chaining enabled since target browsers already support it.

[mgibas]

@matthewsuan hmmm, weirdly this doesn’t work in my case - even adding IE11 doesn’t force the transpilation 😦 If you have any other ideas or things I can check it would be great. Thanks for a quick response though 👍🏼

Edit: Oh, I forgot to mention that im hitting these issues during cypress tests run