已安装React却提示Cannot find module React的问题求助

我之前也踩过类似的坑，结合你已经做的排查步骤，咱们从这几个方向再深入看看：

1. 检查打包配置的JSX转译规则 #

• 先看你的tsconfig.json里的jsx配置项：如果用的是React 17及以上版本，必须把jsx设为react-jsx（或者react-jsxdev用于开发环境），而不是旧版的react。因为React 17+的JSX转译不再需要手动引入React，如果配置错了，转译后的bundle里会出现找不到React.createElement的错误，哪怕你本地装了React也没用。
• 再检查打包工具（比如Webpack/Rollup）的配置：有没有把React设为外部依赖？如果是，那你必须确保页面里先加载React和ReactDOM的脚本（不管是CDN还是本地文件），不然bundle里不包含React代码，浏览器自然找不到。

2. 确认脚本加载顺序与模块类型 #

• 虽然Network面板显示加载了bundle.js，但要检查它的script标签是不是在React脚本之后。如果bundle.js先执行，此时React还没挂载到全局变量，肯定会报React is not defined这类错误。
• 如果你的bundle是ES模块格式，记得给script标签加上type="module"，不然浏览器会把它当成普通脚本执行，可能出现模块解析错误。

3. 聚焦具体报错信息（核心！） #

你只提到了报错，但没说具体是什么错误提示——不同的错误指向完全不同的问题：

• 如果是React is not defined：大概率是打包时没把React包含进bundle，或者全局没挂载React；
• 如果是Invalid hook call：要么是React版本不兼容（比如用了React 16的hook语法但装了React 15），要么是项目里存在多个React实例（比如嵌套依赖里重复装了React）；
• 如果是语法错误：可能是转译时没处理TypeScript的新语法，或者babel/ts-loader的版本太旧。

建议把控制台里的完整报错信息（包括堆栈追踪）贴出来，能更快定位问题。

4. 排查是否存在多个React实例 #

有时候node_modules里虽然有React，但如果某个第三方依赖自己也安装了React，就会出现多个React实例共存的情况，导致hook等功能失效。你可以：

• 在浏览器控制台执行console.log(React.version)，看看全局的React版本和你项目package.json里的版本是否一致；
• 用npm ls react命令查看项目的依赖树，确认有没有重复的React包。

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