I am doing a dev build and I'm getting below babel error. I'm not sure which module/plugin to install for this. Any pointers would be greatly appreciated.

ERROR in ./src/_ponents/display/DisplayList.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /src/_ponents/display/DisplayList.jsx: The rest element has to be the last element when destructing (15:23)

  13 | };
  14 |
> 15 | const DisplayList = ({ ...props, children }) => {
     |                        ^
  16 |     const { classes } = props;
  17 |     console.log(props.data)
  18 |     return (

Code used in the file /src/_ponents/display/DisplayList.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { Typography, withStyles, List } from '@material-ui/core';

const listStyle = {
    heading: {
        textAlign: 'center',
        color: '#FFF',
        backgroundColor: '#383733',
        padding: 10,
        marginBottom: 5,
    }
};

const DisplayList = ({ ...props, children }) => {
    const { classes } = props;
    console.log(props.data)
    return (
        <div>
            <Typography className={classes.heading}>
                {props.title}
            </Typography>
                {children &&
                    children.map((child, key) => {
                        return (
                            <React.Fragment key={key}>
                                {child}
                            </React.Fragment>                    
                        )
                    })}
        </div>
    )
}

DisplayList.propTypes = {
    title: PropTypes.string.isRequired
}

export default withStyles(listStyle)(DisplayList);

Webpack.config.js file

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    resolve: {
        extensions: ['.js', '.jsx'],
    },        
    devtool: 'cheap-module-source-map',
    module: {
        rules: [
            { 
                test: /\.(js|jsx)$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader' 
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                use: [
                    'file-loader',
                    {
                        loader: 'image-webpack-loader',
                    },
                ],
            }            
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ]
}

.babelrc file

{
    "presets": [
        "@babel/env", "@babel/react"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/transform-react-inline-elements",
        "@babel/transform-react-constant-elements",
        "@babel/proposal-object-rest-spread",
        "@babel/transform-spread"
    ]
}

I could'nt find much relevant information in the internet that addresses this problem. Any pointers of where I could have gone wrong ? Is there any babel plugin/module to be installed to get this fixed?

I am doing a dev build and I'm getting below babel error. I'm not sure which module/plugin to install for this. Any pointers would be greatly appreciated.

ERROR in ./src/_ponents/display/DisplayList.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /src/_ponents/display/DisplayList.jsx: The rest element has to be the last element when destructing (15:23)

  13 | };
  14 |
> 15 | const DisplayList = ({ ...props, children }) => {
     |                        ^
  16 |     const { classes } = props;
  17 |     console.log(props.data)
  18 |     return (

Code used in the file /src/_ponents/display/DisplayList.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { Typography, withStyles, List } from '@material-ui/core';

const listStyle = {
    heading: {
        textAlign: 'center',
        color: '#FFF',
        backgroundColor: '#383733',
        padding: 10,
        marginBottom: 5,
    }
};

const DisplayList = ({ ...props, children }) => {
    const { classes } = props;
    console.log(props.data)
    return (
        <div>
            <Typography className={classes.heading}>
                {props.title}
            </Typography>
                {children &&
                    children.map((child, key) => {
                        return (
                            <React.Fragment key={key}>
                                {child}
                            </React.Fragment>                    
                        )
                    })}
        </div>
    )
}

DisplayList.propTypes = {
    title: PropTypes.string.isRequired
}

export default withStyles(listStyle)(DisplayList);

Webpack.config.js file

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    resolve: {
        extensions: ['.js', '.jsx'],
    },        
    devtool: 'cheap-module-source-map',
    module: {
        rules: [
            { 
                test: /\.(js|jsx)$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader' 
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                use: [
                    'file-loader',
                    {
                        loader: 'image-webpack-loader',
                    },
                ],
            }            
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ]
}

.babelrc file

{
    "presets": [
        "@babel/env", "@babel/react"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/transform-react-inline-elements",
        "@babel/transform-react-constant-elements",
        "@babel/proposal-object-rest-spread",
        "@babel/transform-spread"
    ]
}

I could'nt find much relevant information in the internet that addresses this problem. Any pointers of where I could have gone wrong ? Is there any babel plugin/module to be installed to get this fixed?

• javascript
• reactjs
• webpack
• babeljs

• 4 Just like the error message says, move ...props as the last element – Agney Commented Nov 26, 2018 at 6:09
• 1 Possible duplicate of Destructuring to get the last element of an array in es6 – Ajay Gaur Commented Nov 26, 2018 at 6:54
• Thanks Guys, It worked !! You are awesome :-) – user2636593 Commented Nov 26, 2018 at 9:15

1 Answer 1

Just like the error message says, move ...props as the last element:

const DisplayList = ({ children, ...props }) => (...)