Issue: The feature 'optionalChaining' is not activated at the moment, even though it is available for use

I have carefully followed the steps provided in the documentation and also referenced the information given here. As instructed, I updated my package.json file with the following configurations:

},
"babel": {
    "plugins": [
        "@babel/plugin-proposal-nullish-coalescing-operator",
        "@babel/plugin-proposal-optional-chaining"
    ]
},
"dependencies": {

However, despite these changes, I am encountering the following error message:

Support for the experimental syntax 'optionalChaining' isn't currently enabled

I'm unsure of what mistake I might be making. Any guidance or suggestions would be greatly appreciated.

javascriptvue.jsvuejs2babeljsnuxt.js

Answer №1

Sorry for the delayed response, but it looks like the question is still open for those who come across it later:

As of now, optional chaining may not function properly in NUXT projects with node versions greater than 12. It is recommended to use the current LTS version (node 12).

The issue could be related to dependencies within NUXT, although we did not delve deeper into investigating this. Switching to node 12 resolved the problem for us.

Answer №2

Dealing with a similar issue, I encountered difficulties while working with Vue CLI due to the outdated scaffolding version (it seems like separately installed plugins were being overlooked). It's advisable to verify and update the scaffolding of your project.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Personalized 404 Error Page on Repl.it

Is it possible to create a custom 404-not found page for a website built on Repl.it? I understand that typically you would access the .htaccess file if hosting it yourself, but what is the process when using Repl.it? How can I design my own 404-not found p ...

javascripthtmlcsshttp-status-code-404replit

Experiencing a lack of content in an Express response

Currently utilizing express to manage a POST request, but encountering an issue when sending the body using node-fetch. After sending the body and logging it in express (server-side code), I am seeing an empty object. The reason behind this behavior remain ...

javascriptnode.jsexpresspost

Top method for individually choosing multiple selections from a foreach loop output

Need help with a loop: foreach ($userItems_get as $item => $value) { if ($value['prefab'] == 'wearable') { echo $value['name'] . "</br>"; echo "<img src=\"{$value['image_invent ...

javascriptphphtmlselectforeach

Is there a way to automate clicking a link in Internet Explorer using code?

Encountering a unique issue with IE related to this function: function downloadFileFromUserControl(filename) { var name = filename.split("/"); var fName = name[name.length - 1]; console.log("IE seems sleepy during this request"); var link ...

javascriptasp.netinternet-explorer

Issue with mobile device view: BS custom dropdown toggle not functioning

Built a Bootstrap dropdown navbar with custom jQuery & CSS, but facing an issue with toggling submenu in Mobile devices. See the code snippet below: $('.dropdown').click(function() { $(this).children('.dm-lv1').toggleClass('s ...

javascripthtmljquerycssbootstrap-4

Managing data in VueJS with Laravel 5.4: Best practices

I am currently working on developing an application similar to a real-time dashboard that utilizes multiple databases and external APIs. Originally, I had planned to use AJAX along with Laravel Queues for this project, but after discovering VueJS, my inte ...

laravel-5vue.jsvuejs2laravel-5.4laravel-queue

Tips for sending arguments to translations

I am currently implementing vuejs 3 using TS. I have set up my translation files in TypeScript as shown below: index.ts: export default { 'example': 'example', } To use the translations, I simply do: {{ $t('example') }} N ...

typescriptvue.jsinternationalizationvuejs3vue-i18n

Issue with my "message.reply" function malfunctioning in Discord.JS

I'm currently learning how to use discord.Js and I am facing an issue with my message.reply function not working as expected. I have set up an event for the bot to listen to messages, and when a message containing "hello" is sent, it should reply with ...

javascriptdiscorddiscord.js

Tips for accelerating an HTML element to move into position

I am working on a website where I have an element that remains in the upper corner and follows the user as they scroll down. You can see an example of this behavior in this Fiddle. However, I want to enhance this effect by allowing the element to smoothl ...

javascripthtmlcss

Creating a 2D array of multiplication tables using JavaScript

My current task involves creating a program that generates a multiplication table for a given variable 'n'. The results must be stored in a two-dimensional array and displayed in the console with proper data formatting. Although I am familiar wit ...

javascriptarraysloops

Error message: Angular 7 - Running out of memory due to JavaScript heap

When attempting to run the ng serve command in my Angular 7 application, I encountered an error message stating "JavaScript heap out of memory." After researching various responses on Stack Overflow, it became clear that this issue stems from inadequate m ...

javascriptnode.jsangularangular7

What is the best way to assign $ref to child component elements from parent component in Vue.js?

Here is the parent component code: <template> <upload-block :imSrc="LargeIcon" inputName="LargeIcon" :inputHandler="uploadAppIcon" inputRef="LargeIcon" :uploadClickHandler="handleUploadIcon"></upload-block> </ ...

vue.jsvue-class-components

I implemented a proxy in my project to handle cross-domain requests, however, the requested address changes when I make a

Unable to Cross Domains http://localhost:8080/api/login has to be redirected to http://localhost:8080/index.html proxyTable: { '/api': { target: 'http://47.106.74.67:8080', changeOrigin: true, pathRewrite: ...

javascriptvue.jsproxywindow

Creating a multi-tiered cascading menu in a web form: Harnessing the power of

In my form, there is a field called 'Protein Change' that includes a multi-level dropdown. Currently, when a user selects an option from the dropdown (for example, CNV->Deletion), the selection should be shown in the field. However, this funct ...

javascripthtmlcss

I seem to be having trouble encoding a character in Internet Explorer 8, do you have any suggestions on how to fix

After making an XHR get request to my server side, I encountered a problem with Chinese characters in the request URL. While non-IE browsers worked fine, IE8 did not automatically encode the characters, leading to data handling issues on the server side. H ...

javascriptajaxinternet-explorerencodingxmlhttprequest

Can TSLint and ESLint give a warning when a function is accessed as a property?

There have been instances where I've made this specific mistake, and I'm curious if there are any ESLint or TSLint rules in place that could detect it. if (this.isBrowser && this.imageURL) {.....} private isBrowser(): boolean{ retur ...

javascripttypescripteslinttslint

``In JavaScript/Node.js, I am experiencing an issue with an ajax POST request where the object

I'm having trouble sending a JSON object to my server. When I check the console log for req.body, it's showing up as an empty object. Here's the code snippet in question: var submitRecipe = () => { let recipe = {alias: null, descrip ...

javascriptajaxnode.js

"Populate the input fields in a table with the data retrieved from the AJAX request's

For my current project, I am utilizing an ajax request to select data from a database. The selected data includes the area and floor number of a building, formatted as follows: "storey": [{ "storeyno": "1st Floor", &qu ...

javascriptphpjquerymysqlajax

Error occurred in ajax syntax

I found this code online and modified it to suit my needs, but I keep getting a syntax error $(document).ready(function(){ $address = localStorage.getItem('email_address'); $email_field = $('#email_field') if ($address !== null) ...

javascriptjqueryajax

How do you achieve the same effect as <Redirect to="/login" /> with the Navigate component in react-router-dom v6?

When utilizing react-router-dom v5, I had the following code snippet that would direct users to the login page if they weren't authenticated, or to the rest of the application if they were: !isAuthenticated ? ( <> ...

javascriptreactjsreact-router-dom