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


#1

Hello,

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: [
    '@vue/app'
  ],
  plugins: [
    ["@babel/plugin-proposal-optional-catch-binding"],
    ["@babel/plugin-proposal-optional-chaining"]
  ]
}

My main.ts file contains the following code:

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

console.log(
  obj?.foo?.bar
)

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?http://192.168.1.112:8080/sockjs-node (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?
Thanks!


#2

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


#3

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


#4

Hi,
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
}
</script>

notice ?. inside function.


#5

Those files are not compiled by typescript


#6

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": [
      "webpack-env",
      "mocha",
      "chai"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    //"src/**/*.vue",
    //"src/**/*.ts.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "./node_modules"
  ]
}

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