8000 Running mocha tests fails with 'Module parse failed' at typescript optional chaining operator · Issue #6833 · vuejs/vue-cli · GitHub
[go: up one dir, main page]
Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
aumann opened this issue Nov 12, 2021 · 6 comments
Open

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

aumann opened this issue Nov 12, 2021 · 6 comments

Comments

@aumann
Copy link
aumann commented Nov 12, 2021

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
Copy link
Author
aumann commented Nov 15, 2021

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
Copy link

I have the same issue any news.

@aumann
Copy link
Author
aumann commented Nov 19, 2021

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
Copy link
koooge commented Nov 24, 2021

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
Copy link
Author
aumann commented Nov 24, 2021

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
Copy link
ivanmem commented Jul 11, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@aumann @germandb @koooge @ivanmem
0