Having trouble with @babel/plugin-proposal-optional-chaining in Vue.js <script> tag

Question

Having trouble with @babel/plugin-proposal-optional-chaining in Vue.js <script> tag

While working on my vue/vuetify project and attempting to implement optional chaining, I consistently run into 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 installed

@babel/plugin-proposal-optional-chaining

by using the command

yarn add @babel/plugin-proposal-optional-chaining --dev

In my App.vue file, within the created() function, I have the following code:

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

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

console.log({ baz, safe })

The configuration in my babel.config.js is as follows:

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

I am running vue version 2.6.9.

It seems like everything should be functioning correctly after this setup, but the only similar issue I could find is referenced here: https://github.com/vuejs/vue-loader/issues/1697, even though I am using Babel and not TypeScript.

javascript vue.js webpack babeljs optional-chaining

Answer 1

Answer №1

Perhaps you've already resolved this issue, but I encountered the same problem and found that integrating the babel configuration directly into webpack fixed it for me. The necessary settings are now included in @babel/preset-env, so there's no need to separately install the plugin.

Here is an example of how you can add the babel configuration in your 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']
            }
          }
        }
      ]
    }
  },

Answer 2

Perhaps you've already resolved this issue, but I encountered the same problem and found that integrating the babel configuration directly into webpack fixed it for me. The necessary settings are now included in @babel/preset-env, so there's no need to separately install the plugin.

Here is an example of how you can add the babel configuration in your 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']
            }
          }
        }
      ]
    }
  },

Having trouble with @babel/plugin-proposal-optional-chaining in Vue.js <script> tag

Answer №1

Similar questions

Encapsulating data with JSON.stringify

What is the best way to position an image alongside text using Vue and Buefy?

What could be causing my image not to show up on ReactJS?

What is the process for searching a specific column in a Vuetify v-data-table that is not included in the headers?

Is it possible to utilize a JavaScript variable in this particular scenario and if so, what is the

Having trouble with element.scrollTo not functioning properly on mobile devices?

Is there a way to track when the Angular DTOptionsBuilder ajax call is complete and trigger a callback function?

Using Redux saga: passing arguments to axios instance

How can you switch the display between two different class names using JavaScript?

When the `back` button is clicked in a browser from a different domain, does it trigger a page reload?

What is the method for retrieving a value from my Node.js module once it has been modified by an asynchronous function?

Issue with dynamically filling a form field using ValidityState

Tips for bringing a particular tab into focus when a page initially loads

Using Ajax to poll a Celery task

Ways to combine duplicate entries within a column using Ruby on Rails?

What is the best way to use jQuery to set the height of one div equal to another div

What is the best way to continuously compare two date variables every minute using Javascript?

How can I dynamically change the className attribute in a Vue v-for loop?

The function persists in outputting a true result, despite the fact that it is expected to output

Create a form action dynamically with JavaScript