@babel/plugin-proposal-optional-chaining not working inside Vue.js <script> tag

Question

In the vue/vuetify project, while trying to get optional chaining (https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining) to work, I always encounter an error:

./src/App.vue?vue&type=script&lang=ts& (./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=ts&) 155:24
Module parse failed: Unexpected token (155:24)
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 baz = obj?.foo?.bar?.baz // 42
| 
|         const safe = obj?.qux?.baz // undefined

I have added @babel/plugin-proposal-optional-chaining using the yarn add @babel/plugin-proposal-optional-chaining --dev command

In my App.vue I have this code, at created():

const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
}

const baz = obj?.foo?.bar?.baz // 42
const safe = obj?.qux?.baz // undefined

console.log({ baz, safe })

My babel.config.js looks like this:

module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    node: "current",
                },
            },
        ],
    ],
    plugins: ["@babel/plugin-proposal-optional-chaining"],
}

I'm using vue v.2.6.9.

Seems like after that setup everything should work just fine, the only similar issue I have found is this one: https://github.com/vuejs/vue-loader/issues/1697, but here I am, actually using the Babel and not using TypeScript.

Answer 1

You may have fixed this already, but I had the same issue and adding the babel configuration directly into webpack solved the issue for me. It's included in @babel/preset-env now so no need to install the plugin directly it seems.

vue.config.js

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ["@vue/app", '@babel/preset-env']
            }
          }
        }
      ]
    }
  },