노드 14/Vue2.js에서 옵션 체인 구문을 사용한 오류(예기치 않은 토큰)

노드 14/Vue2.js에서 옵션 체인 구문을 사용한 오류(예기치 않은 토큰)

노드 14.17의 Vue.js(v2) 프로젝트에서는 옵션 체인이 작동하지 않습니다.

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

다음의 에러가 표시됩니다.

 ERROR  Failed to compile with 1 error                                                                                                                                                                                                                                                                              11:04:50
 error  in ./src/components/Thing.vue?vue&type=script&lang=js&

Module parse failed: Unexpected token (497:39)
File was processed with these loaders:
 * ./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.  
|             }
|         };
>         const dogName = adventurer.dog?.name;
|         console.log(dogName);
|         // expected output: undefined

 @ ./src/components/Thing.vue
 @ ./src/components/xx-thing.vue?vue&type=script&lang=js&
 @ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js&
 @ ./src/views/Home.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://172.16.8.210:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

다음 중 하나와 관련이 있을 것 같은 예감이 들어요.Babel 7도 설치했습니다만, Babel 모듈명이 변경되어 아직 6을 사용하고 있는 것 같습니다.하지만 Vue 프로젝트를 망치지 않고 확인할 수 있다고 해도, 7로 전환하는 방법도 모릅니다.아마도 이 작업은 전혀 관계가 없을 것입니다.

node -v
v14.17.6

npm ls webpack
webpack@4.46.0

npm ls @babel/core
7.15.5 (=latest)

npm ls @vue/cli-plugin-babel
4.5.13 (=latest)

npm ls @babel/plugin-proposal-optional-chaining
7.14.5 (=latest)

vue info

Environment Info:

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-3770K CPU @ 3.50GHz
  Binaries:
    Node: 14.17.6 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 92.0.4515.131
    Edge: Spartan (44.18362.1474.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.0.7
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.13
    @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:  3.12.1
    @vue/cli-plugin-babel: ^4.5.13 => 4.5.13
    @vue/cli-plugin-eslint: ^3.11.0 => 3.12.1
    @vue/cli-plugin-pwa: ^4.2.3 => 4.5.13
    @vue/cli-service: ^3.11.0 => 3.12.1
    @vue/cli-shared-utils:  3.12.1 (4.5.13)
    @vue/cli-upgrade: ^3.12.1 => 3.12.1
    @vue/component-compiler-utils:  3.2.2
    @vue/preload-webpack-plugin:  1.1.2
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.4.0 => 7.17.0 (4.7.1)
    vue: ^2.6.10 => 2.6.14
    vue-cli-plugin-vuetify: ^0.6.3 => 0.6.3
    vue-eslint-parser:  7.11.0 (2.0.3)
    vue-force-next-tick: ^1.1.0 => 1.1.0
    vue-head: ^2.2.0 => 2.2.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.8
    vue-meta: ^2.3.2 => 2.4.0
    vue-router: ^3.0.3 => 3.5.2
    vue-sse: ^1.0.2 => 1.1.1
    vue-style-loader:  4.1.3
    vue-template-compiler: ^2.6.10 => 2.6.14
    vue-template-es2015-compiler:  1.9.1
    vue-the-mask:  0.11.1
    vuedraggable:  2.24.3
    vuetify: ^2.5.8 => 2.5.8
    vuetify-form-base: ^0.3.2 => 0.3.3
    vuetify-loader: ^1.4.3 => 1.7.3
  npmGlobalPackages:
    @vue/cli: Not Found

저도 추가해 봤어요plugins: ["@babel/plugin-proposal-optional-chaining"],babel.config.display에 접속합니다.

babel 6도 제거하려고 했지만 npm 언인스톨러에서 실제로 제거하지 못했습니다.

유사한 근본 원인이 있을 수 있습니다(불행하게도 해결되지 않았습니다).노드 14 LTS에서는 옵션 체인이 작동하지 않습니까?

언급URL : https://stackoverflow.com/questions/69220861/error-unexpected-token-using-optional-chaining-syntax-in-node-14-vue2-js