Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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
like image 202
simo Avatar asked Apr 19 '18 13:04

simo


2 Answers

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":

pause on exceptions button

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.

like image 117
Dan Abramov Avatar answered Oct 21 '22 03:10

Dan Abramov


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

like image 23
Nicy Anto Avatar answered Oct 21 '22 03:10

Nicy Anto