Optional chaining not working (no, not in the template) #1697

jfbrennan · 2020-07-17T23:30:49Z

Version

15.9.2

Reproduction link

[Bogus link removed] Seriously, why do you make it so hard to submit a simple issue?????

Steps to reproduce

I am trying to use the optional chaining operator inside one of my methods:

methods: {
  fetchJobs() {
    ...
    if (res.jobs?.length) { ... }
    ...
  }
}

I have the latest versions of Vue (2.6.11) and Vue CLI (4.4.6). My package-lock tells me Vue CLI pulled in vue-loader version 15.9.2. I also use SFC. I do not use TypeScript. I do not have any special Babel config or extra plugins. It makes no sense to me that I can use other modern parts of js, but something is barfing on the optional chaining operator.

What is expected?

My code would compile.

What is actually happening?

My code fails to compile and Vue CLI outputs this error (doesn't like the optional chaining operator):

 Building for development...

 ERROR  Failed to compile with 1 errors                                                                                3:41:18 PM

 error  in ./src/views/benchmarks.vue?vue&type=script&lang=js&

Module parse failed: Unexpected token (258:23)
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.
|       api.getjobs()
|         .then(res => {
>           if (res.jobs?.length) {
|             this.jobs = res.jobs
|               // Filter out completed jobs

 @ ./src/views/benchmarks.vue?vue&type=script&lang=js& 1:0-179 1:195-198 1:200-376 1:200-376
 @ ./src/views/benchmarks.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [redacted]@0.1.0 build:dev: `vue-cli-service build --mode development --dest ../server/public --no-clean --watch`

I am under the impression this should work because 1) this is just vanilla js!!!, 2) Babel, which I think vue-loader is using, supports the optional chaining operator, and 3) it's not in the template which won't be supported until Vue 3.

I tried explicitly adding @vue/cli-plugin-babel": "^4.4.6" to my project and that didn't change anything.

Please help!

The text was updated successfully, but these errors were encountered:

haoqunjiang · 2020-07-18T02:51:32Z

vuejs/vue#11088

jfbrennan · 2020-07-20T16:56:44Z

@sodatea 11088 issue is concerned with in the template, my issue is not in the template (see title and description). The problem looks like it's in vue-loader. Please read and reopen.

haoqunjiang · 2020-07-20T17:36:01Z

Then you need to provide a reproduction repo. It works for most people.

haoqunjiang · 2020-07-20T17:38:29Z

A misconfigured tsconfig.json can also lead to this issue. See vuejs/vue-cli#4738 (comment)

jfbrennan · 2020-07-20T18:14:45Z

I suppose most people use Babel and have the Babel plugin and that's why it works for them. I don't want to have to do all that just to get totally valid JavaScript to work. And I also "do not use TypeScript," so it's not a ts config issue. One of the reasons I avoid Babel and TS is to minimize these kinds of time-wasting issues.

The error I shared leads me to believe that out-of-the-box whatever Vue CLI (or vue-loader) comes with and its default config does not support optional chaining. Perhaps it's as simple as an internal version bump?

jfbrennan · 2020-07-20T18:16:20Z

Here's my package.json if that helps:

{
  "name": "my-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "vue-cli-service build --dest ../server/public --no-clean",
    "build:dev": "vue-cli-service build --mode development --dest ../server/public --no-clean --watch",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "flat": "^5.0.0",
    "vega-lite": "^4.11.0",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-router": "^4.4.6",
    "@vue/cli-plugin-unit-jest": "^4.4.6",
    "@vue/cli-service": "^4.4.6",
    "@vue/test-utils": "1.0.0-beta.33",
    "canvas": "^2.6.1",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 10%",
    "last 2 versions",
    "not dead"
  ],
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest/presets/no-babel",
    "collectCoverage": true,
    "collectCoverageFrom": [
      "src/**/*.{js,vue}"
    ],
    "coverageReporters": [
      "html",
      "text-summary"
    ],
    "globals": {
      "vue-jest": {
        "babelConfig": {
          "plugins": [
            "babel-plugin-transform-es2015-modules-commonjs"
          ]
        }
      }
    }
  }
}

jfbrennan · 2020-07-20T18:34:32Z

Vue info as well:

Environment Info:

  System:
    OS: macOS 10.15.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 13.12.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 84.0.4147.89
    Edge: 84.0.522.40
    Firefox: 74.0.1
    Safari: 13.1
  npmPackages:
    @vue/cli-overlay:  4.4.6 
    @vue/cli-plugin-router: ^4.4.6 => 4.4.6 
    @vue/cli-plugin-unit-jest: ^4.4.6 => 4.4.6 
    @vue/cli-plugin-vuex:  4.4.6 
    @vue/cli-service: ^4.4.6 => 4.4.6 
    @vue/cli-shared-utils:  4.4.6 
    @vue/component-compiler-utils:  3.1.2 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/test-utils: 1.0.0-beta.33 => 1.0.0-beta.33 
    @vue/web-component-wrapper:  1.2.0 
    jest-serializer-vue:  2.0.2 
    vue: ^2.6.11 => 2.6.11 
    vue-hot-reload-api:  2.3.4 
    vue-jest:  3.0.6 
    vue-loader:  15.9.3 
    vue-router: ^3.1.6 => 3.1.6 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.4.6

haoqunjiang · 2020-07-21T03:20:02Z

It's webpack that can't yet parse such syntax webpack/webpack#11198

jfbrennan · 2020-07-21T21:20:04Z

@sodatea ok, thanks!

wpitallo · 2021-01-07T12:54:05Z

This should be re-opened its not working without typescript

jfbrennan · 2021-02-09T00:08:01Z

@sodatea

It's webpack that can't yet parse such syntax webpack/webpack#11198

Optional chaining is only in Webpack v5. Looks like Vue Loader is on v4. When is will Vue Loader move to v5?

Liwoj · 2021-02-17T10:21:55Z

Encountered same error after I changed my .browserlistrc to support only modern browsers (Vue CLI 4)

Changing babel.config.js fixed the problem:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  plugins: ['@babel/plugin-proposal-nullish-coalescing-operator', '@babel/plugin-proposal-optional-chaining'],
}

atflick · 2021-02-26T22:31:14Z

I spent several hours on this today and what ultimately worked for me was setting the presets and plugins directly in the webpack rule:

{ test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@vue/cli-plugin-babel/preset', '@babel/preset-env'],
      plugins: ['@babel/plugin-proposal-optional-chaining']
    }
  },
}

jfbrennan · 2021-03-01T23:00:44Z

Have tried some of the workarounds and none seem to work for my minimal setup. This needs to be reopened and resolved inside Vue Loader itself by updating to Webpack 5, which is required for optional chaining support.

@sodatea is there something preventing the upgrade to WP5?

haoqunjiang · 2021-03-02T05:19:55Z

@jfbrennan Vue Loader has supported webpack 5 for a while.
If you are using Vue CLI, v5 alpha is based on webpack 5.

JuniorTour · 2021-08-01T11:22:57Z

Try vue-template-babel-compiler

It will enable Optional Chaining(?.), Nullish Coalescing(??) and many new ES syntax for Vue.js SFC based onBabel.

Github Repo: vue-template-babel-compiler

DEMO

Usage

Please refer to REAMDE for detail usage

Support for Vue-CLI, Nuxt.js, Webpack , any environment use vue-loader.

anvaka · 2021-12-18T06:54:07Z

Idea from @atflick worked for me, I wanted to be very explicit though about module that I couldn't compile and set this in vue.config.js:

const path = require('path');

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('monaco')
      .test({
        test: /\.js$/,
        // See: I'm pointing to a single folder that had the problem, so that I'm not killing
        // babel's caches for other modules
        include: path.join(__dirname, 'node_modules/monaco-editor/esm/vs'),
      })
      .use('babel-loader')
      .loader('babel-loader')
      .options({
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-proposal-optional-chaining']
      }).end();
  }
}

Rainst9 · 2023-03-24T11:57:25Z

Encountered same error after I changed my .browserlistrc to support only modern browsers (Vue CLI 4)

Changing babel.config.js fixed the problem:
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  plugins: ['@babel/plugin-proposal-nullish-coalescing-operator', '@babel/plugin-proposal-optional-chaining'],
}

Great, this has solved my problem, but in my project, after this configuration, an error is reported as follows. I also need to install core js.

`These dependencies were not found:

core-js/modules/es.function.name.js in ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"10cc503a-vue-loader-template"}!./node_modules/babel-loader/lib??ref--13-0!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!.
core-js/modules/es.string.iterator.js in =...........&type=template&id=553c6d43&scoped=true&
core-js/modules/web.dom-collections.iterator.js in ./src/router/index.js

To install them, you can run: npm install --save core-js/modules/es.function.name.js core-js/modules/es.object.to-string.js core-js/modules/es.regexp.exec.js core-js/modules/es.string.iterator.js core-js/modules/es.string.search.js core-js/modules/web.dom-collections.iterator.js`

brhaka · 2023-05-18T16:13:20Z

I had the same issue and the problem was that babel was not set as the parser.
Adding this to package.json under eslintConfig solved it for me:

"parserOptions": {
  "parser": "babel-eslint"
},

jfbrennan changed the title ~~Optional chaining not working (no, not in template)~~ Optional chaining not working (no, not in the template) Jul 17, 2020

haoqunjiang closed this as completed Jul 18, 2020

scottix mentioned this issue Jan 26, 2021

Optional chaining not working for 3.2.0-rc.1 [Webpack/Babel] primefaces/primevue#874

Closed

kinow mentioned this issue May 13, 2021

Upgrade to Yarn v3.0.0-rc2 cylc/cylc-ui#653

Merged

12 tasks

arnog mentioned this issue Aug 11, 2021

[high priority] module can not use at Vue cli (vue 2.x) arnog/mathlive#1123

Closed

githubuser234 mentioned this issue Sep 6, 2021

Storybook 6 with Vue.js doesn't support optional chaining storybookjs/storybook#11515

Closed

Amorites mentioned this issue Sep 10, 2022

Report type-only imports in no-undef-components vuejs/eslint-plugin-vue#1967

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Optional chaining not working (no, not in the template) #1697

Optional chaining not working (no, not in the template) #1697

jfbrennan commented Jul 17, 2020 •

edited

Loading

haoqunjiang commented Jul 18, 2020

jfbrennan commented Jul 20, 2020 •

edited

Loading

haoqunjiang commented Jul 20, 2020

haoqunjiang commented Jul 20, 2020

jfbrennan commented Jul 20, 2020

jfbrennan commented Jul 20, 2020

jfbrennan commented Jul 20, 2020

haoqunjiang commented Jul 21, 2020

jfbrennan commented Jul 21, 2020

wpitallo commented Jan 7, 2021

jfbrennan commented Feb 9, 2021

Liwoj commented Feb 17, 2021 •

edited

Loading

atflick commented Feb 26, 2021

jfbrennan commented Mar 1, 2021 •

edited

Loading

haoqunjiang commented Mar 2, 2021

JuniorTour commented Aug 1, 2021

anvaka commented Dec 18, 2021

Rainst9 commented Mar 24, 2023

brhaka commented May 18, 2023

Optional chaining not working (no, not in the template) #1697

Optional chaining not working (no, not in the template) #1697

Comments

jfbrennan commented Jul 17, 2020 • edited Loading

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

haoqunjiang commented Jul 18, 2020

jfbrennan commented Jul 20, 2020 • edited Loading

haoqunjiang commented Jul 20, 2020

haoqunjiang commented Jul 20, 2020

jfbrennan commented Jul 20, 2020

jfbrennan commented Jul 20, 2020

jfbrennan commented Jul 20, 2020

haoqunjiang commented Jul 21, 2020

jfbrennan commented Jul 21, 2020

wpitallo commented Jan 7, 2021

jfbrennan commented Feb 9, 2021

Liwoj commented Feb 17, 2021 • edited Loading

atflick commented Feb 26, 2021

jfbrennan commented Mar 1, 2021 • edited Loading

haoqunjiang commented Mar 2, 2021

JuniorTour commented Aug 1, 2021

Github Repo: vue-template-babel-compiler

DEMO

Usage

anvaka commented Dec 18, 2021

Rainst9 commented Mar 24, 2023

brhaka commented May 18, 2023

jfbrennan commented Jul 17, 2020 •

edited

Loading

jfbrennan commented Jul 20, 2020 •

edited

Loading

Liwoj commented Feb 17, 2021 •

edited

Loading

jfbrennan commented Mar 1, 2021 •

edited

Loading