React v16.4.1 - Uncaught TypeError: Cannot read property 'object' of undefined when import React Class

Question

I'm new to React and just upgrade from React v15 to React v16. I get an error Uncaught TypeError: Cannot read property 'object' of undefined every time I trying to import a JSX class created before version upgrade and the content cannot be render.

I had already go through many questions but couldn't find a solution for my problem. Below are my codes:

App.js

import React from 'react';
import ManageUser from './admin/ManageUser/ManageUser'
import {render} from 'react-dom';

render(<ManageUser />, document.getElementById('AdminDashboard'));

ManageUser.js

import React, { Component } from 'react';
import ManageUserDatatable from "./ManageUserDatatable";
import ManageUserInsertModal from "./ManageUserInsertModal";

export default class ManageUser extends Component {

    constructor(props) {
        super(props);

        this.state = {
            showInsertModal: false
        };

        this.handleInsertModalChange = this.handleInsertModalChange.bind(this);
        this.openInsertModal = this.openInsertModal.bind(this);

        this.datatable = '';


    }

    openInsertModal() {
        this.setState ({showInsertModal: true}, () => {})
    }

    handleInsertModalChange(value) {
        this.setState ({showInsertModal: value}, () => {
            this.datatable.ajaxCall();
        });
    }

    render() {
        return (
            <div>
                <div className="row">
                    <div className="col-md-12 col-lg-12 col-xs-12">
                        <button className="btn btn-default pull-right" style={{marginRight: 10}} onClick={this.openInsertModal}>Add Admin</button>
                    </div>
                </div>
                <hr />
                <ManageUserDatatable ref={instance => { this.datatable = instance; }}/>

                { this.state.showInsertModal &&
                <ManageUserInsertModal
                    show={this.state.showInsertModal}
                    onHide={this.handleInsertModalChange}
                />}

            </div>
        );
    }
}

The error shown in console:

propTypes.js:3 Uncaught TypeError: Cannot read property 'object' of undefined
    at Object.defineProperty.value (propTypes.js:3)
    at __webpack_require__ (propTypes.js:3)
    at Object.defineProperty.value (propTypes.js:3)
    at __webpack_require__ (propTypes.js:3)
    at Object.<anonymous> (propTypes.js:3)
    at __webpack_require__ (propTypes.js:3)
    at Object.defineProperty.value (propTypes.js:3)
    at __webpack_require__ (propTypes.js:3)
    at Object.defineProperty.value (propTypes.js:3)
    at __webpack_require__ (propTypes.js:3)

Thanks.

how do I find out this project is bootstrapped using create-react-app? As a follow up with my questions in this post, I tried to create a new class after upgrade to v16.4.1 and the class importation works. — YingHua Chai
React.PropTypes has moved into a different package since React v15.5. use the prop-types library instead. reactjs.org/docs/typechecking-with-proptypes.html — Ehsan
hi @EhssanMajdabadi, I did not call any PropTypes function in the JSX class. I believe this is not the cause of the error generated. — YingHua Chai

Fahadul Islam Fahadul Islam · Accepted Answer · 2018-07-13T07:54:01

Define propTypes bellow your code. This should be like

NameOfYourComponent.propTypes = { Component/function/object: PropTypes.string/func/object.isRequired, }

See example here Typechecking With PropTypes

React v16.4.1 - Uncaught TypeError: Cannot read property 'object' of undefined when import React Class

2 Answers