VSCode出现TS2307错误：找不到'react'模块或对应类型声明

问题详情 #

• 用CRA TypeScript模板创建的项目，在VSCode中打开时触发TS2307错误，提示「Cannot find module 'react' or its corresponding type declarations」
• 同一项目在WebStorm中可正常编译运行
• 环境配置：nvm管理Node.js，包管理工具为Yarn 3.2.3，未执行eject操作
• 项目package.json配置：

{
  "name": "frontend-ts",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

错误截图：

解决方法 #

方法1：适配Yarn PnP模式 #

Yarn 3默认启用PnP替代node_modules，VSCode需手动适配：

• 安装Yarn SDK：

  yarn dlx @yarnpkg/sdks vscode
  

• 重启VSCode，打开命令面板（Ctrl+Shift+P），选择「TypeScript: Select TypeScript Version」，勾选「Use Workspace Version」
• 重启TypeScript服务：命令面板选择「TypeScript: Restart TS Server」

方法2：切换回node_modules模式 #

若不需要PnP，可修改Yarn配置：

• 项目根目录创建/编辑.yarnrc.yml，添加：

  nodeLinker: node-modules
  

• 重新安装依赖：

  yarn install
  

• 重启VSCode并重启TS服务

方法3：检查TS配置文件 #

确保tsconfig.json（CRA默认生成）包含正确的模块解析配置，核心配置项：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

若配置无误，直接重启VSCode的TS服务。

方法4：统一Node.js版本 #

确保VSCode使用的Node版本与终端一致：

• 终端执行nvm current查看当前版本
• VSCode终端执行同样命令，若版本不同，点击左下角状态栏的Node版本按钮切换至对应版本

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