logo标签列表

升级ReactJS后出现“Uncaught TypeError: Cannot read property 'bool' of undefined”错误

reactjs
13

我刚刚将我的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
嗯，显然是来自于“prop-types”库。也许你也需要更新它。 - Shota
你能否发布一下使用prop-types的代码片段？ - Ologho Cyril Paul
如果项目不是很大，你可以删除所有的PropType验证实例，以确保这是罪魁祸首吗？ - Ologho Cyril Paul
是的，它并不大，我已经从所有地方删除了它的使用，但仍然得到相同的错误。 - simo
似乎你的webpack配置中没有生成源映射。你应该这样做以获得更好的错误位置。此外，你还需要注意这些包之间的兼容性：react, redux, react-redux, react-router, react-router-dom。 - Tarun Lalwani
2个回答
12
但我可以知道哪一行代码导致了错误。
您需要使用浏览器提供的工具来查看错误发生的位置。否则，可能会在简单的错误上花费数小时。
特别是，如果您使用Chrome，请在“Sources”选项卡中打开DevTools。点击暂停按钮（图像上的蓝色按钮）以“暂停异常”。

pause on exceptions button

现在，如果你在Sources面板打开的情况下重新加载页面，你将看到代码出了什么问题。可能是需要更新第三方依赖项。
最后，你的sourcemap设置似乎有问题。几乎每个调用帧都有相同的行号，这很奇怪。如果你不确定如何正确配置webpack进行开发，我建议使用官方支持的工具Create React App，它会为你配置好。
8
我已经搜索了这个项目，没有找到React.PropTypes，只有import PropTypes from 'prop-types'。 - simo
prop-types包可能出了一些问题，你能否先运行npm uninstall prop-types，然后再运行npm install prop-types --save呢？ - Nicy Anto
我尝试了但得到了相同的结果，如何知道导致错误的行号？ - simo
你能否发布完整的错误堆栈？我感觉这是 webpack 尝试将项目进行转译和打包时出现的错误，因为错误来自于 propTypes.js 而不是 bundle.js。 - Nicy Anto
1
"没有找到 React.PropTypes" - 这可能不是你的代码问题，而是其中一个依赖项的问题。 - Dan Abramov
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接