[v5] Optional chaining from default import not transpiled correctly

[ThomasKientz]

Version

5.0.1

Reproduction link

https://github.com/ThomasKientz/vue-cli-repro/

Environment info

``` System: OS: macOS 12.1 CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz Binaries: Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 8.4.0 - ~/.nvm/versions/node/v16.13.1/bin/npm Browsers: Chrome: 99.0.4844.51 Edge: Not Found Firefox: 95.0.2 Safari: 15.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.1.1 @vue/babel-plugin-transform-vue-jsx: 1.2.1 @vue/babel-preset-app: 5.0.1 @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: 5.0.1 @vue/cli-plugin-babel: ~5.0.0 => 5.0.1 @vue/cli-plugin-router: 5.0.1 @vue/cli-plugin-vuex: 5.0.1 @vue/cli-service: ~5.0.0 => 5.0.1 @vue/cli-shared-utils: 5.0.1 @vue/component-compiler-utils: 3.3.0 @vue/web-component-wrapper: 1.3.0 vue: ^2.6.14 => 2.6.14 vue-hot-reload-api: 2.3.4 vue-loader: 17.0.0 (15.9.8) vue-style-loader: 4.1.3 vue-template-compiler: ^2.6.14 => 2.6.14 vue-template-es2015-compiler: 1.9.1 npmGlobalPackages: @vue/cli: 5.0.1 ```

Steps to reproduce

From repo :

• npm run serve // or npm run build --modern

• open browser javascript console

note : I have forced modern build by adding "not ie 11" in browserslist.

What is expected?

Console to log undefined instead of throwing error.

What is actually happening?

Optional chaining operator from default imports are not transpiled correctly with modern build.

import test from "@/test.js"; 

test?.ok?.bar

// test.js

export default {
  foo: 'bar',
}

test?.ok?.bar is transpiled to test.ok.bar, ? are stripped away leading to the error :

Uncaught TypeError: Cannot read properties of undefined (reading 'bar')

Legacy build is fine.

May be related to https://github.com/webpack/webpack/issues/12960

[ThomasKientz]

More details,

This issue is only happening with v5, not v4.

It is happening only for the modern build.

[JoA-MoS]

I can confirm I am also seeing this issue. One work around I found all though not great is to destructure after default import

import test from '@/test.js';

const { foo, ok } = test;

ok?.bar;

This does keep the optional chaining operator

As an example we ran into this access our vuex store state in a js file.

[JoA-MoS]

Another note as this was only an issue with the modern build and this is likely another bug the .browserlistrc not IE 11 turns on modern build even if the cli specifies --no-module when building.

[JoA-MoS]

This is also an issue in vue cli v4 when using the modern build flag @ThomasKientz can you confirm and if so will you update the ticket title?