未捕获的TypeError：无法读取属性＆＃39; bool＆＃39;在升级reactjs后未定义

Question

我刚刚将我的reactjs项目从15.4.2升级到16.3.2，项目编译得很好但是，在浏览器中，我收到此错误：

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)

但我可以知道导致错误的行在哪里..也许我还要升级其他包？

这是我目前所拥有的：

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

修改

完整错误：

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

Answer 1

  

但我可以知道导致错误的行在哪里。

您需要使用浏览器提供的工具来查看错误发生的位置。否则，在简单的错误上花费数小时就很容易。

具体而言，如果您使用Chrome，请在“来源”标签上打开DevTools。单击暂停按钮（图像上的蓝色）至“暂停异常”：

现在，如果您重新加载打开了“源”窗格的页面，您将看到代码中断的位置。它可能在需要更新的第三方依赖项中。

最后，您的源地图设置看起来很糟糕。奇怪的是，几乎每个呼叫帧都具有相同的行号。如果您不确定如何正确配置webpack以进行开发，我建议使用官方支持的工具，例如Create React App，为您配置它。

Answer 2

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

从上面的链接

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

您必须import PropTypes from 'prop-types';而不是依赖React.PropTypes