React项目导入Prop-types时提示找不到文件报错如何解决

核心报错原因 #

• prop-types 包的导入语句大小写不匹配：npm 官方的 prop-types 包名为全小写，你代码中写的 import PropTypes from 'Prop-types' 首字母大写，和 node_modules 文件夹内实际的包目录名称不一致，触发了文件路径匹配校验失败。
• 额外潜在问题：代码中使用属性时写的是 props.AboutText，和你在 propTypes、defaultProps 中定义的小写开头属性名 aboutText 不一致，会导致默认值不生效、类型校验不生效的问题。

修复操作 #

1. 修正导入语句，将首字母大写的 Prop-types 改为全小写：

// 修改前
import PropTypes from 'Prop-types';
// 修改后
import PropTypes from 'prop-types';

2. 修正 JSX 中属性调用的大小写，和定义保持一致：

// 修改前
<a className="nav-link" href="/">{props.AboutText}</a>
// 修改后
<a className="nav-link" href="/">{props.aboutText}</a>

3. 如果你还未安装 prop-types 依赖，先执行安装命令：
   npm install prop-types 或者 yarn add prop-types
4. 保存修改后重启 React 开发服务即可解决报错。

注意：Node 生态的包导入对大小写敏感，必须和 package.json 中声明的包名完全一致，否则都会触发路径匹配错误。

内容的提问来源于stack exchange，提问作者user13511738