Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Trace: The node type SpreadProperty has been renamed to SpreadElement at Object.isSpreadProperty

I'm launching a react app, and here's my Webpack configuration:

'use strict'

const ExtractPlugin = require('extract-text-webpack-plugin')
const HTMLPlugin = require('html-webpack-plugin')
module.exports = {
    devtool: 'eval',
    entry: `${__dirname}/src/main.js`,
    output: {
        filename: 'bundle-[hash].js',
        path: `${__dirname}/build`,
        publicPath: '/',
    },
    mode: 'development',
    performance: {
        hints: false
    },
    plugins: [
        new HTMLPlugin(),
        new ExtractPlugin('bundle-[hash].css'),
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_module/,
                loader: 'babel-loader',
            },
            {
                test: /\.scss$/,
                loader: ExtractPlugin.extract(['css-loader', 'sass-loader']),
            },
        ],
    },
}

Then, I have a package.json file, here are the dependencies:

"devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "and": "0.0.3",
    "babel-cli": "^6.26.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-loader": "^8.0.4",
    "eslint": "^5.9.0",
    "install": "^0.12.2",
    "jest": "^23.6.0",
    "npm": "^6.4.1",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^1.0.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.11.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "resolve-url-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.25.1",
    "webpack-dev-server": "^3.1.10"
  } 

I have tried plenty of ways of updating babel packages up to 7th version, changing babelrc config, what ever.

The project though compiles, but in the beginning of compilation I get the following message:

Trace: The node type SpreadProperty has been renamed to SpreadElement at Object.isSpreadProperty

And about of hundred rows like that. After all that rows being printed out, the compilation process proceeds and is completed successfully.

What's that and how can I get rid of this rows?

like image 975
Dominik Domanski Avatar asked Nov 15 '18 19:11

Dominik Domanski


4 Answers

here is the final setting that solved problem for me.

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

For a better understanding, here is my package.json's devDependencies:

"devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-object-assign": "^7.0.0",
    "@babel/plugin-transform-react-jsx": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "8.0.4",
    "prop-types": "15.6.2",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "style-loader": "^0.23.1",
    "utils": "^0.3.1",
    "webpack": "4.26.1",
    "webpack-cli": "3.1.2",
    "webpack-dev-server": "^3.1.10"
  }

Here is my webpack.config.js module's section:

module: {
        rules: [
            {
                test: /\.(js|jsx)$/ ,
                exclude: /node_modules/,
                loaders: "babel-loader"
            }
        ]
    }
like image 186
Emanuele Colonnelli Avatar answered Nov 04 '22 16:11

Emanuele Colonnelli


This issue is occurring due to using outdated

`"babel-plugin-transform-object-rest-spread"`

update this in package.json

`"@babel/plugin-proposal-object-rest-spread": "^7.0.0",`

and update your .babelrc.js file in my case it looks like this

const isTest = String(process.env.NODE_ENV) === 'test'
module.exports = {
  presets: [["@babel/env", { modules: isTest ? 'commonjs' : false }, "@babel/react"]],
  plugins: [
    'syntax-dynamic-import',
    'transform-class-properties',
    '@babel/plugin-proposal-object-rest-spread',
  ],
}

this solves my problem

like image 38
Hanzla Habib Avatar answered Nov 04 '22 15:11

Hanzla Habib


Before in my .babelrc

i was using the plugin: ["transform-object-rest-spread", { "useBuiltIns": true }],

then i switch it to "@babel/plugin-proposal-object-rest-spread" and all those warnings went away, which has been very nice. `

like image 18
Maddocks Avatar answered Nov 04 '22 16:11

Maddocks


In my case, I was not implementing the Webpack configuration and still error was there. After so many solutions implementation, the error was same or once an error was removed another appeared. Finally, I deleted .bablerc, .babelrc and package-lock.json files and ran rm -rf node_modules && npm install and then ran react-native run-android and it worked for me. :-)

like image 5
Udit Avatar answered Nov 04 '22 15:11

Udit