Can't set up @babel/plugin-proposal-optional-chaining



A couple months ago, when Vue CLI 3 was still in beta, I experimented on a new project with optional chaining, using @babel/plugin-proposal-optional-chaining.
I managed to set up everything and make it work. Since then I’ve abandoned the project and moved to other stuff, during which Vue CLI 3 was updated to 3.0.5.
Now, I am unable to run this same project again because of an error. It doesn’t understand the foo?.bar syntax anymore, and I can’t find why,

I’ve set up a brand new vue project (with typescript) to do some tests.
After installing vue and @babel/plugin-proposal-optional-chaining, I get the following package.json:

  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-optional-catch-binding": "^7.0.0",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@types/chai": "^4.1.0",
    "@types/mocha": "^5.2.4",
    "@vue/cli-plugin-babel": "^3.0.5",
    "@vue/cli-plugin-pwa": "^3.0.5",
    "@vue/cli-plugin-typescript": "^3.0.5",
    "@vue/cli-plugin-unit-mocha": "^3.0.5",
    "@vue/cli-service": "^3.0.5",
    "@vue/test-utils": "^1.0.0-beta.20",
    "chai": "^4.1.2",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "typescript": "^3.0.0",
    "vue-template-compiler": "^2.5.17"

Note that I have also installed @babel/plugin-proposal-optional-catch-binding, in order to test if other plugins work (and it does work).

My babel.config.js file is as follows:

module.exports = {
  presets: [
  plugins: [

My main.ts file contains the following code:

const obj = {
  foo: {
    bar: {
      baz: 111,


When starting the server with npm run serve, I get the following error in the console:

 WAIT  Compiling...                                                                             12:49:26 PM
 94% after seal

 ERROR  Failed to compile with 1 errors                                                         12:49:27 PM
 error  in ./src/main.ts

Syntax Error: SyntaxError: C:\Node.js\next2\client2\src\main.ts: Unexpected token (9:18)

   7 |     },
   8 | };
>  9 | console.log(obj ? .foo ? .bar
     |                   ^
  10 |     :
  11 |     :
  12 | );

 @ multi (webpack)-dev-server/client? (webpack)/hot/dev-server.js ./src/main.ts
                                                                                            Type checking in progress...
No type errors found
Version: typescript 3.1.3
Time: 929ms

I don’t understand why it doesn’t work.
I have tested this plug-in on my other node server (with Babel 7.1) and it works great. It’s only when using Vue CLI that I can’t have it work.
The other plugin works fine, so I don’t think that it’s a problem in babel.config.js.

Maybe I just don’t see the bug, or maybe the plugin is not compatible with the current version of Vue?
An idea?


Well, the Babel plugin surely works, but typescript doesn’t support this syntax.


oh, I didn’t see that.
Thanks for the info. I’ll forget about this plugin for now!


I’ve got similar problem to y3018, but I have files which are ts only or js only. My question is: is it possible to disable typescript compilation for .vue files containing <script lang="js"> ?

For example Status.vue:

<script lang="js">
healthchecks (state) {
  return state.backendsHealthchecks.find((a => a.backendSlug === this.backendSlug))?.healthchecks

notice ?. inside function.


Those files are not compiled by typescript


Right. I had an error because of tsconfig.json:

  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
    "paths": {
      "@/*": [
    "lib": [
  "include": [
  "exclude": [

Removing “src/**/*.vue” line solved my problem.