使用Vite+TypeScript时prop-types导入解析失败错误求助

问题重现 #

使用npm run dev启动项目时触发模块解析错误：

[plugin:vite:import-analysis] Failed to resolve import "prop-types" from "src/components/MyComponent.tsx". Does the file exist?

组件代码中导入prop-types并声明了运行时校验规则，注释掉MyComponent.propTypes赋值后错误消失，但需要保留运行时类型校验逻辑。

解决步骤 #

1. 安装prop-types核心依赖
   报错本质是项目未安装prop-types包，执行命令安装：

npm install prop-types --save
# 或用yarn
yarn add prop-types

2. 安装TypeScript类型定义（可选但推荐）
   作为TypeScript项目，为避免类型校验报错，补充安装对应的类型声明包：

npm install @types/prop-types --save-dev
# 或用yarn
yarn add @types/prop-types --dev

原因说明 #

• 纯JSX项目可能已预装prop-types，但新创建的TypeScript项目默认不包含该依赖，导致Vite无法解析模块。
• TypeScript负责编译时静态类型检查，prop-types负责运行时类型校验，两者作用互补，保留propTypes声明可兼容非TS环境的组件调用场景。

安装完成后重新运行npm run dev，导入和propTypes赋值逻辑即可正常工作，错误会消失。

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