Running mocha tests fails with 'Module parse failed' at typescript optional chaining operator

[aumann]

Version

4.5.15

Reproduction link

github.com

Environment info

Environment Info:

  System:
    OS: Linux 5.4 Linux Mint 20.2 (Uma)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Firefox: 94.0
  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:  4.5.15 
    @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.15 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-pwa: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-router: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-unit-mocha: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-vuex: ~4.5.0 => 4.5.15 
    @vue/cli-service: ~4.5.0 => 4.5.15 
    @vue/cli-shared-utils:  4.5.15 
    @vue/component-compiler-utils:  3.3.0 
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0 
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/test-utils: ^1.0.3 => 1.2.2 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^6.2.2 => 6.2.2 
    typescript: ~4.1.5 => 4.1.6 
    vue: ^2.6.11 => 2.6.14 
    vue-class-component: ^7.2.3 => 7.2.6 
    vue-eslint-parser:  7.11.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.8 (16.8.3)
    vue-property-decorator: ^9.1.2 => 9.1.2 
    vue-router: ^3.2.0 => 3.5.3 
    vue-style-loader:  4.1.3 
    vue-template-compiler: ^2.6.11 => 2.6.14 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.4.0 => 3.6.2 
  npmGlobalPackages:
    @vue/cli: 4.5.15

Steps to reproduce

Checkout current main of reproducer repository (faf2ae989ad at the time of writing)

Run npm install && npm run test:unit

What is expected?

The one test is run and completes successfully. Just as it does if I remove the offending typescript code.

What is actually happening?

 ERROR  Failed to compile with 1 error

 error  in ./src/components/HelloWorld.vue?vue&type=script&lang=ts&

Module parse failed: Unexpected token (14:14)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/ts-loader/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.
| function fun() {
|   const s = "";
>   const l = s?.length;
| }
| 

---

Serving and building work, i.e. both npm run build and npm run serve complete successfully

Please let me know if you need any more information.

[aumann]

I should add that this is basically fresh from the template vue-cli has created for me, that is it is a minimization of the issue I see in the real product. I'm still investigating what the crucial diff in package-lock between the running and failing versions is. But maybe someone has a hint (e.g. any known babel issues?)

[germandb]

I have the same issue any news.

[aumann]

I've got it back to running in our "real" project. But only by going back to a package-lock.json based on vue-cli 4.3.

I did not yet try creating a fresh project with this cli version, maybe that works, too, as a minimization.

The only thing I have definitely verified: Upgrading to vue-cli beyond ~4.3 re-introduces the error, i.e. breaks my package-lock.json ( break as in downgrading cli back to 4.3 does not fix the build. Only after reverting back to the old lock file.

[koooge]

There are 2 workaround options.

1. Set target: 2019 in tsconfig.json.
2. Add plugins in babel.config.js.

 plugins: [
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining',
  ]

#4738 (comment)

[aumann]

Thank you very much. I can confirm that this solves the issue for me.

Can the defaults in Vue-CLI be adapted accordingly to help future users?

[ivanmem]

I complement the answer for || = and similar operators. Add to plugins '@babel/plugin-proposal-logical-assignment-operators'.