已执行npm install仍提示[ts] Cannot find module 'react'问题排查

嘿，我之前也碰到过一模一样的问题，别慌，咱们一步步排查解决：

1. 最可能的原因：缺少React的TypeScript类型声明包 #

TypeScript需要明确的类型定义才能识别React模块，但react本身是JavaScript编写的，没有自带TypeScript类型文件。你需要安装专门的类型声明包：

npm install --save-dev @types/react @types/react-dom

这是升级时最容易漏掉的步骤，很多人只改了文件后缀，却忘了装类型依赖。

2. 检查tsconfig.json的关键配置 #

确保你的tsconfig.json里有这些核心设置，它们直接影响TypeScript对模块和JSX的解析：

{
  "compilerOptions": {
    "jsx": "react-jsx", // React 17+推荐用这个，旧版本可以设为"react"
    "moduleResolution": "node", // 让TS遵循Node.js的模块解析规则，找到node_modules里的包
    "target": "ES5", // 按需设置目标ES版本，兼容更多浏览器
    "module": "ESNext", // 和webpack的模块系统匹配
    "esModuleInterop": true, // 解决TS与CommonJS模块（比如React）的兼容问题
    "strict": true // 可选，但开启严格模式能提前规避很多类型错误
  },
  "include": ["src/**/*"] // 确保TS能扫描到src目录下所有.ts/.tsx文件
}

3. 确认webpack配置正确处理TSX文件 #

在webpack.common.js里，要保证能识别并编译.tsx文件，同时配置正确的扩展名解析：

module.exports = {
  entry: './src/index.tsx',
  resolve: {
    // 添加.ts/.tsx后缀，import时可以省略后缀名
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader', // 用ts-loader处理TS/TSX文件，也可以用babel-loader配合@babel/preset-typescript
        exclude: /node_modules/
      }
    ]
  }
};

4. 重启VSCode的TypeScript服务 #

有时候VSCode的TS语言服务会缓存旧配置，导致明明依赖已装却仍报错。你可以按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），搜索并执行「TypeScript: Restart TS Server」，或者直接重启VSCode，这个小操作经常能解决编辑器的提示问题。

5. 验证TS代码是否被编译到bundle中 #

运行你的构建命令（比如npm run build），打开生成的bundle.js，搜索你组件里的内容（比如HelloWorld的文本），如果能找到，说明编译是成功的。如果用webpack-dev-server运行，页面能正常渲染的话，也证明编译没问题，只是编辑器的提示延迟了。

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