Error (Unexpected Token) using optional chaining syntax in Node 14/Vue2.js

Question

Optional chaining isn't working on my Vue.js (v2) project on Node 14.17.

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

I get the following error:

 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

I'm having a hunch it may be related to one of the below. I've installed Babel 7 as well, but perhaps the project still uses 6, as the Babel module name has apparently changed. But I don't know how to check, or how to switch it to 7, and even if that could be done without breaking the Vue project -- and perhaps it has nothing to do with that..

node -v
v14.17.6

npm ls webpack
[email protected]

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

I've also tried adding plugins: ["@babel/plugin-proposal-optional-chaining"], to babel.config.js

I've also tried to uninstall babel 6, but the npm uninstaller fails to actually uninstall it.

Could have a similar root cause, (unfortunately unresolved): Optional chaining not working in Node 14 LTS?

We're using Node.js 14 with a Vite.js build stack in our project, and we don't have any issues with optional chaining. — connexo
– connexo, Commented Sep 17, 2021 at 13:04
This might be because Vue3 allegedly has out-of-the-box support for optional chaining, and Vite isn't available for Vue2.. I'm currently waiting on Vuetify to be ready for Vue3 to move on.. — svenema
– svenema, Commented Sep 17, 2021 at 13:11
Little late here, but ran into a similar issue, and while looking into it noticed that Vue 2 is using webpack 4. And Webpack 4 is using Acorn 6. Wheras support for optional chaining wasn't implemented into Acorn until version 7.2.0. So I guess the only solution to this would be, as you mentioned, Babel. — Alicia Sykes
– Alicia Sykes, Commented May 10, 2022 at 17:29

Alicia Sykes · Accepted Answer · 2022-05-10 16:46:25Z

4

Cause

This is because Vue 2 is using webpack 4. And Webpack 4 is using Acorn 6. Wheras support for optional chaining wasn't implemented into Acorn until version 7.2.0.

Solution

To use optional chaining, and other newer features, you will need to use Babel. This feature is available in @babel/plugin-proposal-optional-chaining, which is also included in the ECMA-262 / @babel/preset-env, or specificially for Vue apps: just @vue/app.

If you've not already done so, you'll need vue add @vue/cli-plugin-babel. Then just update your Babel config with a valid preset, e.g.

"babel": {
  "presets": [
    "@vue/app"
  ]
}

A more detailed guide, can be found here.

Restart the dev server/ rebuild the app, and optional chaining should now work :)

answered May 10, 2022 at 16:46

Alicia Sykes

7,4428 gold badges39 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

svenema Over a year ago

I had to remove @vue/cli-plugin-babel/preset in order to add @vue/app. However, it still won't work ("Unexpected token"), but I suspect this has something to do with my tsconfig. I've been poking at it for a while now, but can't get it to run. If all fails I'll wait for Vue3, which is around the corner for me now.. My original babel.config.js: module.exports = { presets: [ "@vue/cli-plugin-babel/preset", "@babel/preset-env", ], "plugins": ["@babel/plugin-proposal-optional-chaining"], }

Collectives™ on Stack Overflow

Error (Unexpected Token) using optional chaining syntax in Node 14/Vue2.js

1 Answer 1

Cause

Solution

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Cause

Solution

1 Comment

Linked

Related