When running the `vue-cli-service test:unit` command, an error involving an "Unexpected token" message related to the usage of the spread operator

Within my code, I am utilizing the destructuring operator. However, during the module build phase, I encountered an "Unexpected token" error. Any suggestions on how to resolve this issue without completely rewriting my code to avoid using the destructuring operator?

To run tests, I execute

vue-cli-service test:unit src/**/*.spec.js
.

Here is a snippet from my package.json:

    ...
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.12.1",
        "@vue/cli-service": "^4.5.9",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-cli": "^6.26.0",
        ...
    },
    ...

Answer №1

To solve this issue, I had to incorporate @babel/preset-env by configuring it in either babel.config.js (in my case) or .babelrc

presets: [
    [
        '@babel/preset-env',
        {
            targets: {
                esmodules: true,
            },
        }
    ]
],

The solution was found in a comment on GitHub, which can be seen here

Furthermore, you can learn more about targets.esmodules in depth

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

When displaying text pulled from MYSQL in a div, white space is eliminated

I'm attempting to display a string that contains both spaces and line breaks. When I output the string as a value in an input field, the spaces are displayed correctly. <textarea rows={15} value={content} /> However, when I try to display ...

Arranging a JSON array based on the numerical value within an object

I am interested in sorting an array from a json file based on distances calculated using the haversine library. The purpose is to find geolocations near a specified value and display the closest results first. function map(position){ var obj, ...

retrieve the identification number associated with a specific value

How can I retrieve the value of this ID, which is sent from the controller and displayed in the table? This is my HTML code: <tbody class="no-border-x"> <tr> <td id="id"></td> <td id="nm_kegiatan"></td> ...

Using JavaScript to extract variables from parsed JSON data

Could someone please help me understand how to run this code smoothly without encountering any errors? var test = 'Something'; JSON.parse('{"xxx": test}'); I am inquiring about this because I have a JSON object containing variables th ...

What is the best way to retrieve a complete DynamoDB scan response using aws-sdk-js-v3 without object types included in the marshaled response?

After struggling with the AWS JS SDK V3 documentation and examples, I decided to share my findings to help others. The official SDK docs were frustrating and misleading, especially when it came to showing marshaled output properly. While the DDB Doc client ...

Encounter a problem while installing node modules

I am facing an issue with my test directory which contains a package.json file: { "name": "test", "version": "0.0.1", "dependencies": { "hem": "~0.1.6", } } Upon trying to run node install, I encounter the following error: module.js:337 ...

Issue encountered when attempting to utilize Next-Auth alongside Credentials Provider to authenticate within a pre-existing system

I am currently utilizing the Next-Auth Credentials provider for authentication purposes through our existing API. Following the guidelines provided at https://next-auth.js.org/configuration/callbacks the code snippet used is as follows: callbacks: { ...

Leverage server-side data processing capabilities in NuxtJS

I am currently in the process of creating a session cookie for my user. To do this, I send a request to my backend API with the hope of receiving a token in return. Once I have obtained this token, I need to store it in a cookie to establish the user' ...

Create a single HTMLTestRunner file while executing multiple test classes

I've been struggling to configure HTMLTestRunner to consolidate output into a single file when running multiple test classes. Despite extensive research, I have not been successful in achieving this. Here is an example of my setup: class TestOne(uni ...

I'm having trouble getting my bot command handler to function properly

When it comes to my command handler, the commands function properly. However, when I attempt to include arguments like $user-info @user instead of just $user-info, it returns an error stating that the command is invalid. Code //handler const prefix = &ap ...

The Vuetify table encounters a loading error when trying to retrieve data

Encountering an error with the following code 'Property "item" was accessed during render but is not defined on instance'. However, when I switch it to a normal everything functions properly. <!DOCTYPE html> <html lang="e ...

Iterate through the list of objects and display duplicates only once

var fixtures = [ { "matchday": 1, "homeTeamName": "Arsenal FC", "awayTeamName": "Leicester City FC" }, { "matchday": 1, "homeTeamName": "AFC Bournemouth", ...

What is the procedure for defining the secret code for a private key in saml2-js?

I need to implement a key/cert with a passphrase in my project that's currently using saml2-js. I have already set up everything but encountering a bad decrypt error without the passphrase. Is there a way to incorporate this passphrase? Below are the ...

CanJS utilizes mustache templates to escape HTML tags

I have a requirement to present a series of choices to the user. I am using a mustache template along with the CanJS JavaScript framework to showcase these options. The problem arises when attempting to display an option such as: Potato Rs. 12 The mustac ...

Is it possible for me to set a timer on the 'keyup' event in order to decrease the frequency of updates?

The code I currently have is functional: $wmdInput.on('keyup', function () { var rawContent = $wmdInput.val(); scope.$apply(function () { ngModel.$setViewValue(rawContent); }); }); Unfortunately, it appears to slow down my t ...

Unlock the full potential of ts-transformer-keys in your Vue application

note: After spending countless hours on this, I finally had a breakthrough today. It turns out that changing transpileOnly to false made all the difference: chainWebpack: config => { const getCustomTransformers = program => ({ before: [ ...

Define a universal URL within JavaScript for use across the program

When working with an ASP.NET MVC application, we often find ourselves calling web service and web API methods from JavaScript files. However, a common issue that arises is the need to update the url in multiple .js files whenever it changes. Is there a me ...

Choose all the alternative A radio buttons utilizing JavaScript

If the "4 stars" option is selected at the top, I want all corresponding "4 stars" options in the form to be automatically selected. Similarly, if "3 stars" is chosen, I need all the "3 stars" options to be selected. I attempted to achieve this functionali ...

What is the reason for the failure of the jQuery code to disable the submit button in the following snippet?

I am working on a feature to disable the submit button in a form when the username, email, password fields are empty. When all of them are filled, I want to enable the submit button. However, the current code is not disabling the submit button as expected. ...

I'm unsure of the most efficient way to condense this statement

$(document).ready(function(){ if ($(window).width() <961){ $('.item').on('click',function(){ /*---do something---*/ }) }else{ $('.item').on('click',function(){ ...