由于未定义的 PropTypes.node 导致 React 应用程序崩溃答案

【问题标题】：React App Crashing Due to undefined PropTypes.node由于未定义的 PropTypes.node 导致 React 应用程序崩溃
【发布时间】：2018-09-26 15:29:56
【问题描述】：

我今天在处理 node.js + 基于 react 的项目时遇到了一个问题，该项目是使用 react v.15.0.0 创建的，它有几个不推荐使用的功能，所以我升级了项目以使用 react v.16.2.0。

现在它崩溃了，不能再用 webpack 编译了:(

我的错误信息为：

    TypeError: Cannot read property 'node' of undefined
[3]     at Object.defineProperty.value (/Volumes/Develop/MyPortfolio/edward/dist/server.js:528:40)
[3]     at __webpack_require__ (/Volumes/Develop/MyPortfolio/edward/dist/server.js:20:30)
[3]     at Object.<anonymous> (/Volumes/Develop/MyPortfolio/edward/dist/server.js:406:22)
[3]     at __webpack_require__ (/Volumes/Develop/MyPortfolio/edward/dist/server.js:20:30)
[3]     at Object.defineProperty.value (/Volumes/Develop/MyPortfolio/edward/dist/server.js:342:16)
[3]     at __webpack_require__ (/Volumes/Develop/MyPortfolio/edward/dist/server.js:20:30)
[3]     at Object.<anonymous> (/Volumes/Develop/MyPortfolio/edward/dist/server.js:185:14)
[3]     at __webpack_require__ (/Volumes/Develop/MyPortfolio/edward/dist/server.js:20:30)
[3]     at Object.defineProperty.value (/Volumes/Develop/MyPortfolio/edward/dist/server.js:56:16)
[3]     at __webpack_require__ (/Volumes/Develop/MyPortfolio/edward/dist/server.js:20:30)
[3] [nodemon] app crashed - waiting for file changes before starting...

我追溯到 /my project/dist/server.js 文件，这是导致崩溃的行：

ExternalLink.propTypes = {
      children: _react2.default.PropTypes.node
    };

而 _react2 被声明为：

var _react = __webpack_require__(3);

var _react2 = _interopRequireDefault(_react);

我做了一些研究，发现 React 16.x 有一个单独的包用于类型检查“Prop-Types”，我实际上尝试将旧函数换成新函数，如下所示：

   var _propType = require("prop-types");

    ExternalLink.propTypes = {
      children: _propType.default.PropTypes.node
    };

仍然没有运气，我现在不知道，如果有人可以提供建议或解决方法，将不胜感激。谢谢。

【问题讨论】：

标签： node.js reactjs web webpack react-proptypes

【解决方案1】：

您只需使用_propTypes.node 而不是_propType.default.PropTypes.node

var _propType = require("prop-types");

ExternalLink.propTypes = {
 children: _propType.node
};

从 React 16 开始，PropTypes 被拆分到自己的包中，并且该包的默认导出是 PropTypes 对象，因此您只需直接使用它而不是查找 .default.PropTypes.

【讨论】：

【解决方案2】：

这对我有用：

var _propType = require("prop-types");

ExternalLink.propTypes = {
  children: _propType.node
};

我正在使用 create-react-app 并使用这种 CommonJS 语法交换 ES6 模块导入工作正常

【讨论】：