Uncaught TypeError: Cannot read property 'bool' of undefined after upgrade reactjs

问题:

I have just upgraded my reactjs project from 15.4.2 to 16.3.2 , the project compiles fine however, in the browser, I get this error:

Uncaught TypeError: Cannot read property 'bool' of undefined     at Object.<anonymous> (propTypes.js:3)     at __webpack_require__ (propTypes.js:3)     at Object.<anonymous> (propTypes.js:3)     at __webpack_require__ (propTypes.js:3)     at Object.exports.__esModule (propTypes.js:3)     at __webpack_require__ (propTypes.js:3)     at Object.<anonymous> (propTypes.js:3)     at __webpack_require__ (propTypes.js:3)     at Object.<anonymous> (propTypes.js:3)     at __webpack_require__ (propTypes.js:3) 

but I could know where is the line causing the error.. maybe I have to upgrade other packages too?

here is what I have currently:

"devDependencies": {     "axios": "^0.17",     "babel-preset-react": "^6.24.1",     "bootstrap-sass": "^3.3.7",     "create-react-class": "^15.6.3",     "cross-env": "^5.1",     "laravel-mix": "^1.0",     "lodash": "^4.17.4",     "react": "16.3.2",     "react-dom": "16.3.2"   },   "dependencies": {     "ajv": "^6.4.0",     "animate.css": "^3.1.1",     "bootstrap": "^3.3.7",     "dom-tools": "^0.1.4",     "font-awesome": "^4.7.0",     "history": "^4.7.2",     "jquery": "^3.1.1",     "jquery-slimscroll": "^1.3.6",     "metismenu": "^2.5.0",     "prop-types": "^15.6.0",     "react-bootstrap": "^0.28.3",     "react-bootstrap-sweetalert": "^4.3.1",     "react-infinite-grid": "^0.4.0",     "react-infinite-scroller": "^1.1.4",     "react-metismenu": "^1.4.0-alpha.2",     "react-pace": "^1.0.0",     "react-redux": "^5.0.6",     "react-router": "^4.2.0",     "react-router-dom": "^4.2.2",     "react-table": "^6.8.0",     "redux": "^3.7.2",     "redux-logger": "^3.0.6",     "redux-persist": "^4.9.1",     "redux-thunk": "^2.2.0",     "ree-validate": "^1.0.15",     "rndoam": "^0.1.0",     "semantic-ui-react": "^0.76.0"   } 

EDIT

Full error:

Uncaught TypeError: Cannot read property 'bool' of undefined     at Object.<anonymous> (propTypes.js:3)     at __webpack_require__ (propTypes.js:3)     at Object.<anonymous> (propTypes.js:3)     at __webpack_require__ (propTypes.js:3)     at Object.exports.__esModule (propTypes.js:3)     at __webpack_require__ (propTypes.js:3)     at Object.<anonymous> (propTypes.js:3)     at __webpack_require__ (propTypes.js:3)     at Object.<anonymous> (propTypes.js:3)     at __webpack_require__ (propTypes.js:3) (anonymous) @ propTypes.js:3 __webpack_require__ @ propTypes.js:3 (anonymous) @ propTypes.js:3 __webpack_require__ @ propTypes.js:3 exports.__esModule @ propTypes.js:3 __webpack_require__ @ propTypes.js:3 (anonymous) @ propTypes.js:3 __webpack_require__ @ propTypes.js:3 (anonymous) @ propTypes.js:3 __webpack_require__ @ propTypes.js:3 (anonymous) @ propTypes.js:3 __webpack_require__ @ propTypes.js:3 (anonymous) @ propTypes.js:3 __webpack_require__ @ propTypes.js:3 (anonymous) @ propTypes.js:3 __webpack_require__ @ propTypes.js:3 Object.defineProperty.value @ propTypes.js:3 __webpack_require__ @ propTypes.js:3 (anonymous) @ propTypes.js:63 (anonymous) @ propTypes.js:66 

回答1:

but I could know where is the line causing the error.

You need to use the tools provided by your browser to see where the error happens. Otherwise it's easy to spend hours on simple errors.

Specifically, if you use Chrome, open the DevTools on the Sources tab. Click the pause button (blue on the image) to "Pause on Exceptions":

Now if you reload the page with Sources pane open, you will see where exactly the code is breaking. It might be in a third party dependency that needs updating.

Finally, your sourcemap setup looks broken. It's odd that almost every call frame has the same line number. If you're not sure how to configure webpack correctly for development, I suggest using an officially supported tool like Create React App that configures it for you.

回答2:

https://reactjs.org/docs/typechecking-with-proptypes.html

From the link above

React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead.

You have to import PropTypes from 'prop-types'; instead of relying on React.PropTypes

文章来源: Uncaught TypeError: Cannot read property 'bool' of undefined after upgrade reactjs