SPFx 1.14项目报Cannot find module 'react'等依赖错误如何解决

问题表现 #

开发SharePoint Online平台1.14版本SPFx Web部件时，项目.ts文件几乎所有库都报引用错误，首个典型报错为：

Cannot find module 'react' or its corresponding type declarations.

报错截图：

已尝试单独执行npm install react、npm install --save-dev @types/react、npm i @microsoft/rush-stack-compiler-3.9命令后问题未解决，按以下步骤排查处理：

• 第一步：先确认依赖版本匹配性。SPFx 1.14版本对依赖版本有强绑定要求，单独安装最新版react/类型包会直接出现兼容性问题，该版本要求固定使用react@16.13.1、@types/react@16.9.51，不要手动升级相关依赖版本。
• 第二步：清空残留依赖重新全量安装。先删除本地依赖目录和锁文件，命令行在项目根目录执行：

  # Mac/Linux系统
  rm -rf node_modules package-lock.json
  # Windows PowerShell系统
  Remove-Item -Recurse -Force node_modules, package-lock.json
  

  清理完成后不要单独安装单个包，直接执行npm install，按照项目package.json中预设的SPFx匹配版本拉取全量依赖。
• 第三步：校验tsconfig.json配置正确性。打开项目根目录的tsconfig.json，确认extends字段配置正确：

  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json"
  

  同时检查compilerOptions.typeRoots配置，必须包含"./node_modules/@types"、"./node_modules/@microsoft"两个路径，不存在手动排除react类型包的规则。
• 第四步：修正IDE使用的TypeScript版本。以VS Code为例，编辑器默认会加载自带的全局TypeScript版本，和SPFx项目依赖的版本不兼容时就会报模块找不到错误。打开任意.ts文件，点击右下角状态栏的TypeScript版本号，选择「使用工作区版本」，选中项目node_modules下安装的对应TypeScript版本即可。
• 第五步：如果以上操作后仍报错，手动安装版本匹配的核心依赖，执行命令：

  npm install @microsoft/sp-core-library@1.14.0 @microsoft/sp-webpart-base@1.14.0 react@16.13.1 @types/react@16.9.51 --save-exact
  

  安装完成后重启IDE，报错即可消除。

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