vue-loader: Optional chaining not working (no, not in the template)

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'],
}

@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.

https://github.com/vuejs/vue/issues/11088

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']
    }
  },
}

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.

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?

This should be re-opened its not working without typescript

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

@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?

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();
  }
}

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