升级React项目遇'originalKeywordKind'弃用Parsing error的排查与解决

诊断原因 #

这个错误是ESLint相关依赖版本不兼容导致的，通常是升级TypeScript或ESLint核心包后，配套的@typescript-eslint系列插件（解析器、插件、工具类）版本没同步更新，或者不同插件版本不匹配，使得旧版本插件仍在调用已被废弃的originalKeywordKind方法。

具体解决步骤 #

• 统一@typescript-eslint系列包版本
  打开项目package.json，检查@typescript-eslint/eslint-plugin、@typescript-eslint/parser、@typescript-eslint/utils的版本，确保三者完全一致。如果版本有差异，全部升级到当前最新兼容版本（TypeScript 5.x建议搭配@typescript-eslint v6.x系列）。执行命令更新：

  # npm
  npm install @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest @typescript-eslint/utils@latest --save-dev
  
  # yarn
  yarn add @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest @typescript-eslint/utils@latest --dev
  

• 清理依赖缓存并重装
  缓存可能导致依赖版本不生效，执行清理重装：

  # npm环境
  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  
  # yarn环境
  yarn cache clean
  rm -rf node_modules yarn.lock
  yarn install
  

• 升级ESLint核心版本
  确保eslint版本与@typescript-eslint系列兼容（比如@typescript-eslint v6.x需要ESLint v8.23.0及以上），版本过低则一并升级：

  # npm
  npm install eslint@latest --save-dev
  
  # yarn
  yarn add eslint@latest --dev
  

• 验证ESLint配置
  打开.eslintrc.js或.eslintrc.json，确认parser配置正确指向@typescript-eslint/parser，没有混用过时解析器：

  {
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended"
    ]
  }
  

完成以上步骤后，重启代码编辑器，再检查.tsx文件，错误即可消除。

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