使用Vite创建React项目时遇props未校验报错的原因咨询

这个错误是ESLint的react/prop-types规则在起作用，核心原因是Vite和Create React App（CRA）的默认ESLint配置存在差异：

• CRA默认的ESLint配置里，默认关闭了react/prop-types规则，或者在开发阶段不会严格校验该规则，所以不定义props类型验证也不会报错。
• Vite创建的React项目，默认通过@vitejs/plugin-react集成的ESLint配置是开启了react/prop-types规则的，只要组件没有做props类型验证，就会触发这个错误。

这不是缺少模块导致的——如果你的Vite项目能触发这个错误，说明已经安装了eslint-plugin-react插件（该插件包含react/prop-types规则），只是规则处于启用状态。

解决办法 #

• 添加prop类型验证：安装prop-types包，给组件的props定义类型：
  先安装依赖：

  npm install prop-types
  

  组件中使用示例：

  import PropTypes from 'prop-types';
  
  function UserCard({ username, age }) {
    return (
      <div>
        <p>用户名：{username}</p>
        <p>年龄：{age}</p>
      </div>
    );
  }
  
  UserCard.propTypes = {
    username: PropTypes.string.isRequired,
    age: PropTypes.number
  };
  

• 关闭ESLint规则：在项目根目录的.eslintrc.cjs（或.eslintrc.js）中修改配置，禁用该规则：

  {
    "rules": {
      "react/prop-types": "off"
    }
  }
  

• 用TypeScript替代：如果是TS项目，直接用TS接口定义props类型，同时可以关闭react/prop-types规则——TS本身会做类型校验，更适配TS开发流程。

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