React报错Package path未从@types/react包导出问题咨询

这个报错和组件重命名、导入路径配置没有任何关系，核心原因有两个：

1. 纯JavaScript项目错误安装了仅用于TypeScript的类型包 @types/react
2. 你安装的@types/react@18.0.10版本配置了严格的exports导出规则，没有对外暴露根路径.，webpack解析模块时错误命中了这个包的解析逻辑，直接抛出模块找不到的错误。

你重命名组件的操作只是触发了webpack的增量重编译，把原本藏着的依赖冲突问题暴露出来而已——就算你不重命名组件，后续只要触发缓存失效的重编译，这个报错一样会出现，这也是为什么你拉新分支只改组件名也能复现的原因。

• 移除多余的类型依赖
  纯JS写的CRA项目不需要手动安装任何@types/*开头的类型包，直接执行命令卸载：

  npm uninstall @types/react
  

• 全量清理缓存与残留文件
  之前你重装依赖没生效，是因为没清构建缓存，执行以下命令彻底清理：

  rm -rf node_modules package-lock.json
  rm -rf node_modules/.cache
  

• 补全组件缺失的导入语句
  你贴的代码里有两处漏写导入，之前被依赖报错盖住了，修完依赖后如果报对应错误直接补上即可：
  • TopicList、CourseList组件使用了NavLink组件，需要在文件顶部加导入：

    import { NavLink } from "react-router-dom";
    

  • Home组件使用了Fragment，需要在文件顶部加导入：

    import { Fragment } from "react";
    

• 重新安装依赖启动验证

  npm install
  npm start
  

• 基于react-scripts的CRA项目不要手动安装@types/react、@types/react-dom这类类型包，react-scripts已经内置了JS项目所需的类型提示依赖，手动安装极易出现版本不匹配、导出规则冲突的问题
• 重命名、删除文件后如果出现和改动逻辑无关的模块解析报错，优先清构建缓存再排查，webpack增量编译缓存偶尔会出现解析逻辑残留，反复核对导入路径纯粹是浪费时间

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