引入react-number-easing后报错，是项目问题还是库的问题？

这个问题我之前也碰到过，根源很明确：react-number-easing库的代码还在使用已经被React废弃的React.PropTypes API。从React 16.13.0版本开始，PropTypes已经从React核心包中移除，必须单独安装prop-types依赖才能使用。

具体原因 #

错误提示里的第36行代码value: React.PropTypes.any.isRequired，在新版React中React.PropTypes已经不存在了，所以会抛出Cannot read property 'any' of undefined的错误。

解决方案 #

这里提供三种可行的解决方法，你可以根据自己的需求选择：

方法一：手动修复库代码（临时方案）

1. 找到项目中node_modules/react-number-easing/src/NumberEasing.js文件（如果错误指向编译后的文件，就找对应位置）
2. 在文件顶部添加prop-types的导入：

import React from 'react';
import PropTypes from 'prop-types'; // 新增这一行

3. 将所有用到React.PropTypes的地方替换成PropTypes，比如第36行改成：

value: PropTypes.any.isRequired

注意：这种方法的缺点是，下次执行npm install时修改会被覆盖，需要重新操作。

方法二：用patch-package持久化修复（推荐方案）

这个工具可以帮你把对node_modules的修改做成补丁，每次install后自动应用：

1. 先安装patch-package和prop-types：

npm install prop-types --save
npm install patch-package --save-dev

2. 在项目的package.json的scripts中添加postinstall脚本：

"scripts": {
  // 其他脚本...
  "postinstall": "patch-package"
}

3. 按照方法一的步骤修改react-number-easing的代码
4. 生成补丁文件：

npx patch-package react-number-easing

之后项目根目录会生成一个patches文件夹，里面保存着你的修改补丁，每次执行npm install后都会自动应用这个修改，不用再手动改node_modules了。

方法三：替换为维护更活跃的替代库

如果不想折腾补丁，也可以考虑用react-countup这类维护更频繁、支持新版React的库，它实现的功能和react-number-easing类似，用法也简单：

npm install react-countup --save

使用示例：

import CountUp from 'react-countup';

<CountUp end={15} duration={0.3} />

内容的提问来源于stack exchange，提问作者Илья