Optional Chaining not working

matthewsuan commented 3 years ago

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;
```
| },

darrinmn9 commented 3 years ago

optional chaining support was added in node_V14 https://node.green/#ES2020-features-optional-chaining-operator-----

matthewsuan commented 3 years ago

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 commented 3 years ago

@matthewsuan I updated all dependencies and still have this issue, is there any config (babel ?) that I need to modify ? Any help appreciated 😄

My configs:

// babel.config.js
module.exports = { 
  presets: [
    '@vue/app'
  ]
}

// package.json
 "devDependencies": {
...
"@babel/core": "^7.13.1",
"@cypress/webpack-preprocessor": "^5.6.0",
"@vue/cli-plugin-babel": "^4.5.11",
"@vue/cli-plugin-e2e-cypress": "^4.5.11",
"@vue/cli-service": "^4.5.11"
...
}

// tests/e2e/plugins/index.js
const webpack = require('@cypress/webpack-preprocessor')

module.exports = (on, config) => {
  on('file:preprocessor', webpack({
    webpackOptions: require('@vue/cli-service/webpack.config'),
    watchOptions: {}
  })) 

  return Object.assign({}, config, {
    fixturesFolder: 'tests/e2e/fixtures',
    integrationFolder: 'tests/e2e/specs',
    screenshotsFolder: 'tests/e2e/screenshots',
    videosFolder: 'tests/e2e/videos',
    supportFile: 'tests/e2e/support/index.js'
  })  
}

And error:

Module parse failed: Unexpected token (15:15)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   const computeKey = key => {
|     const ite = JSON.parse(localStorage.getItem('ite'));
>     return ite?.authenticated ? `${key}-${ite.session?.user?.id}` : key;
|   };
|

matthewsuan commented 3 years ago

@mgibas this is my babel config.

module.exports = {
  presets: [
    [
      "@vue/cli-plugin-babel/preset",
      {
        targets: {
          chrome: "87.0.0",
          edge: "87.0.0",
          firefox: "84.0.0",
          ios: "13.3.0",
          safari: "13.1.0"
        }
      }
    ]
  ]
};

The idea was to downgrade atleast one of the targets to a version that doesn't support optional chaining to force babel to include optional chaining plugin.

mgibas commented 3 years ago

@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

ivangermanov commented 3 years ago

@mgibas Did you manage to solve it?

mgibas commented 3 years ago

Yes - I’ll try to find what was that exactly cause all I remember now is that it was my fault :)

mgibas commented 3 years ago

Ok found it, super minor and confusing thing:

make sure that you run your tests with NODE_ENV=production - without it Babel will not kick in (which makes total sense). I just added that to my .env.test file.

vuejs / vue-cli