从React 15.6.2升级至16版本导致Web应用崩溃求助

我之前升级React版本时也碰到过一模一样的问题，核心原因确实是React 15.5之后就把PropTypes从主包移除，放到独立的prop-types包里了。下面是一步步排查和解决的方法：

1. 先检查自己的代码有没有遗留的旧写法 #

先扫一遍你项目里的组件代码，有没有直接从React对象里取PropTypes的情况，比如：

import React from 'react';

MyComponent.propTypes = {
  title: React.PropTypes.string.isRequired
};

如果有，全部改成从prop-types包导入的方式，同时别忘了安装这个包：

npm install prop-types --save

修改后的代码应该是这样：

import React from 'react';
import PropTypes from 'prop-types';

MyComponent.propTypes = {
  title: PropTypes.string.isRequired
};

2. 排查第三方依赖的锅 #

如果自己的代码都改完了还报错，那肯定是某个第三方依赖还在使用React.PropTypes这种旧写法。试试这些方法定位：

• 先把所有依赖都更到最新版本，确保它们兼容React 16：

  npm update
  

• 用开发模式启动项目（不要用生产构建），开发模式下的错误栈会更详细，能直接指向出问题的依赖包：

  npm start
  

  之前我就是靠这个找到某个很久没更新的UI组件库在搞事情。
• 还可以用npm ls react看看有没有依赖偷偷嵌套安装了旧版本的React，或者用npx depcheck检查一下项目里的依赖状态。

3. 临时救急的兼容方案 #

如果某个依赖暂时没有更新版本，你可以在项目的入口文件（比如src/index.js）顶部加一段代码，把PropTypes挂载回React对象，先让项目跑起来：

import React from 'react';
import PropTypes from 'prop-types';

// 临时兼容旧依赖，不建议长期使用
React.PropTypes = PropTypes;

这个方法只是权宜之计，后续一定要替换掉不兼容的依赖，不然可能会有其他隐藏问题。

4. 确认react-scripts版本是否匹配 #

最后，确保你用的react-scripts版本是支持React 16的，React 16.2.0对应的react-scripts至少要2.x以上。可以用下面的命令查看版本并升级：

# 查看当前版本
npm list react-scripts

# 升级到最新版
npm install react-scripts@latest --save

内容的提问来源于stack exchange，提问作者D.B.