<Grid> and <Row> tags not working in react giving error : bundle.js:9 Error: Minified React error #130

Question

I am developing a sample react-redux application using webpack

webpack.config.js

var path=require('path');
const webpack = require('webpack'); 
module.exports= {
    entry : './src/app.js',
    output : {
        filename : 'bundle.js',
        path : path.resolve(__dirname,'public')
    },
    watch: true,
    module : {
        rules : [
            {
                test :/\.js$/,
                exclude: /node_modules/,
                loader : 'babel-loader',
                query : {
                    "presets": ["@babel/preset-env","@babel/preset-react"]
                }
            }
        ]
    }
}

bookList.js

"use strict"
import React from 'react';
import {connect} from 'react-redux';
import { bindActionCreators } from 'redux';
import {getBooks} from '../../actions/booksAction';
import {Grid, Col, Row, Button} from 'react-bootstrap';
import bookItem from './bookItem';
class BooksList extends React.Component
{
    componentDidMount(){
    this.props.getBooks()
    }

    render()
    {   
        const booksList = this.props.books.map((booksArr)=> {
            return (
                    <Col xs={12} sm={6} md={4} key={booksArr.id}>
                       testing
                    </Col>
                    )
        })


    return (
            <Grid>
                   {booksList} 
            </Grid>   
            )
    }
}

function mapStateToProps(state){
    // which data to pass to react component
  return{
    books: state.books.books
  }
}
function mapDispatchToProps(dispatch){
  return bindActionCreators({getBooks:getBooks}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(BooksList);

index.html (main page where grid also will load)

<html>
    <head>
        <title>
        Hello Redux
        </title>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"  crossorigin="anonymous">
    </head>

    <body>
        <div id="root"></div>
    </body>    
    <script src="bundle.js"></script>
</html>

error bundle.js:9 Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. (bundle.js:9)

I already installed bootstrap, should i need to write anything in webconfig? Can anyone resolve my issue

I have tried to add 'style-loader','css-loader' in presets of webconfig.js but giving error

Please provie code written for booksList. If there is no bookslist, then it is undefined which may cause this error. Try remove bookslist from render function and check if code works. — Piyush
Well to find which thing is actually causing error, try to remove booksList varable from return block and check if the error is gone. — Piyush
I removed {booksList} and made it as <Grid></Grid> it is showing the error — sivashanker
If i make <Grid> to <div></div> it is working. Grid, Row, Col tags are not working — sivashanker

Matt Croak Matt Croak · Accepted Answer · 2020-06-13T18:18:50

I'd recommend not using bindActionCreator, the docs also recommend not using it with redux. It's misleading because the examples in the redux docs are a bit outdated and still use bindActionCreator. More on that can be found here.

In your case, since you're already importing your action, you don't need to use the bindActionCreator. You can simply do the below

function mapStateToProps(state){
    // which data to pass to react component
  return{
    books: state.books.books
  }
}

export default connect(mapStateToProps, {getBooks})(BooksList);

As for the error you're getting it's because one of the Components you tried to use is undefined. I noticed you're using Grid, try using another component in bootstrap's library. In the grid docs, you can try using a combination of Container, Row, and Col to create a grid system. See below.

<Container fluid="md">
  <Row>
    <Col>1 of 1</Col>
  </Row>
</Container>

If this is still creating issues try doing it with a div and see if it works. The undefined components could be a result of a dependency version mismatch. You could potentially try deleting your node_modules and re-installing react-bootstrap.

<Grid> and <Row> tags not working in react giving error : bundle.js:9 Error: Minified React error #130

1 Answers