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 2 Answers
Answers 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.
Answers 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
0 comments:
Post a Comment