Encountered an error while running NPM build command: "Warning: The node type RestProperty has been updated to RestElement in Babel 7.0.0"

We have been encountering Trace warnings stating that the node type RestProperty has been renamed to RestElement in our builds. Although the build is successful, we are seeing a lot of these warnings since upgrading to babel 7.0.0

I attempted the solution provided here Trace: The node type SpreadProperty has been renamed to SpreadElement at Object.isSpreadProperty but unfortunately, it did not resolve the issue.

relevant package.json:

"devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-export-default-from": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-transform-modules-commonjs": "^7.0.0",
    "@babel/plugin-transform-regenerator": "^7.0.0",
    "@babel/polyfill": "7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
...
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.0",

babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-syntax-dynamic-import",
    ["@babel/plugin-proposal-class-properties", { "loose": false }],
  ],
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs", "transform-regenerator"]
    }
  }
}

Trace: The node type RestProperty has been renamed to RestElement
    at Object.isRestProperty (/apps/node_modules/@babel/types/lib/validators/generated/index.js:4192:11)
    at DestructuringTransformer.pushObjectPattern (/apps/node_modules/babel-plugin-transform-es2015-destructuring/lib/index.js:197:15)
    at DestructuringTransformer.push (/apps/node_modules/babel-plugin-transform-es2015-destructuring/lib/index.js:108:14)
    at DestructuringTransformer.init (/apps/node_modules/babel-plugin-transform-es2015-destructuring/lib/index.js:317:12)
    at PluginPass.VariableDeclaration (/apps/node_modules/babel-plugin-transform-es2015-destructuring/lib/index.js:468:27)
    ...
    // Additional stack trace lines could be added as per requirement
javascriptnpmbabeljspackage.json

Answer №1

In order for your code to work properly, make sure you include the following:

plugins": [
"@babel/plugin-proposal-object-rest-spread"
]

This should be added to your .babelrc file.

Answer №2

Here's the solution that resolved my issue:

  1. Removed the file yarn.lock.
  2. Executed rm -rf modules.
  3. Ran yarn install
  4. Ran yarn build

Success!

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

I am attempting to gather outcomes from two separate arrays

I have a challenge of filtering the first array based on the text in the second array. I am trying to figure out how to update the count filter in the first array using values from the second array. First Array: var firstArray =[{text:"India",co ...

javascriptarraysreactjsfilter

The onClick function designed to trigger the Material UI dialog box is experiencing functionality issues

Is there a bug in the component? The material-ui dialog-box sometimes pops up on button click and shows the target value perfectly, but other times it doesn't. I am passing the value on the icon onclick event - (e) and using it in the onClick function ...

javascriptreactjsdialogmaterial-uibuttonclick

Steps for creating a JavaScript session expiry notification:

Ensuring user session continuity is essential, especially before it expires. In a recent quest on Stack Overflow, I inquired about detecting a dead session and alerting the user. A solution involving AJAX/JSON was proposed, but it inadvertently kept the s ...

javascriptjquerysession

What is the best way to show a nested div element within a v-for loop in Vue.js?

One interesting feature of my coding project is that I have an array nested within another array, and I iterate through them using two v-for loops. The challenge arises when I try to display a specific div in the second loop only upon clicking a button. ...

javascriptvue.jsvuejs2vue-component

Utilizing Intellisense for seamless integration with third-party libraries and the Angular-CLI

When working on an Angular 2 project using angular2-cli, I encountered the need to incorporate third-party JavaScript libraries that should be accessible in the global JavaScript scope (such as the TWEEN namespace from the tween.js library). Following the ...

npmglobalintellisenseangular2-cli

Step by step guide to creating individual counter sections

I have set up a counter section where the numbers go from 0 to a specific value. However, currently all three counters start counting simultaneously. Is there a way for the first counter to count up first, then once it's done, move on to the second c ...

javascripthtmlcssbootstrap-4bootstrap-5

What is the method for eliminating quotes from a URL?

Changing the URL: history.replaceState('data to be passed', 'Title of the page', '<?php echo getAddress(); ?>/?usp-custom-14="'+urldates+'"&usp-custom-8="'+title+'"'); After making changes, it s ...

javascriptjquery

Get the nearest offspring of the guardian

I have a main 'container' div with multiple subsections. Each subsection contains 1 or 2 sub-subsections. Let's say I have a variable that holds one of the subsections, specifically the 4th subsection. This is the structure:container > s ...

javascriptjqueryhtml

Avoiding triggering the parent event from the child in React

I'm facing a situation where clicking on a parent element results in it flipping to display a child element with different colors. However, the issue arises when the user tries to click on one of the colors in the child element, as it also triggers th ...

javascriptcssreactjseventsdom-events

HTML - implementing a login system without the use of PHP

While I am aware that the answer may lean towards being negative, I am currently in the process of developing a series of web pages for an IST assignment in Year 9. Unfortunately, the web page cannot be hosted and our assessor lacks the expertise to utiliz ...

javascriptphphtmlauthentication

Reset dropdown selection when a search query is made

Currently experimenting with Angular to develop a proof of concept. Utilizing a functional plunker where selecting an option from a dropdown populates a list of items from an $http.get( ). Additionally, there is a search input that should trigger its own $ ...

javascriptjsonangularjs

Tips for refreshing HTML multiple file upload without reloading the page

I am currently working on a feature that involves counting the number of files uploaded. If more than 10 images are uploaded, I want to clear the input field while keeping everything else in the form intact. Everything was working fine until I encountered ...

javascriptjqueryajaxhtml

Tips for adjusting the speed of animations in Odometer/vue-odometer

Referencing the Odometer documentation at duration: 3000, // Adjusts the expected duration of the CSS animation in the JavaScript code Even though my code is set up like this, the duration parameter doesn't seem to be effective: <IOdometer a ...

javascriptvue.js

Applying a CSS transition to transform properties excluding rotation effects

I'm looking to apply a transitional animation to an element's transform property without affecting the rotation. Here is the code snippet: <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js ...

javascriptjquerycsscss-transitions

animation of several rows in a table with ng-animate is not feasible

I'm working on highlighting items when they appear in a table. There might be multiple items appearing simultaneously, but it seems like ng-animate is not handling this situation correctly. In the provided example below, you can observe that the div ...

javascriptangularjsng-animate

Exploring Password Verification Techniques in JavaScript

I'm struggling with a password comparison issue in JavaScript. It was working fine on my previous project, but for some reason it's not working now. Here is the HTML code: <form> <label> <strong>Username</ ...

javascriptforms

Exploring the Differences Between Arrays in JavaScript

I am currently tackling the task of comparing arrays in JavaScript, specifically within node.js. Here are the two arrays I am working with: Array 1: [16,31,34,22,64,57,24,74,7,39,72,6,42,41,40,30,10,55,23,32,11,37,4,3,2,52,1,17,50,56,60,65,48,43,58,28,3 ...

javascriptarraysnode.jsexpresslogic

Guide to Deploying Bower on Heroku

Currently, I am in the process of deploying a NodeJs application on Heroku that utilizes bower. Following the recommendations provided here, however, upon pushing to Heroku, an error has arisen: Error Status Code of Git: 128 ...

node.jsherokunpmbower

Is there a way to transform a callback into promises using async/await, and convert a prototype function into a standard

I need help converting a code callback function to promises. When attempting to convert the prototype to a normal function, I encounter an error that I can't fix on my own. I am eager to utilize the ES7 async-await feature to avoid callbacks. functio ...

javascriptnode.jsnpmbackend

Can you explain the function of v-bind within Vue?

I recently started learning Vue and decided to follow a video tutorial by Traversy Media on Youtube In the tutorial, the instructor used v-bind but I struggled to understand its usage. Despite my efforts, I still find the documentation a bit challenging ...

javascriptvue.js