React项目更新依赖后出现Parsing error: DeprecationError问题求助

在React项目中更新依赖、升级TypeScript版本后，出现了以下ESLint解析错误：

Parsing error: DeprecationError: 'originalKeywordKind' has been deprecated since v5.0.0 and can no longer be used. Use 'identifierToKeywordKind(identifier)' instead

我的package.json内容如下：

{
  "name": "some_name_here",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.5.0",
    "@ant-design/pro-components": "^2.6.34",
    "@fullcalendar/core": "^5.11.0",
    "@fullcalendar/daygrid": "^5.11.0",
    "@fullcalendar/react": "^5.11.1",
    "@fullcalendar/timegrid": "^5.11.0",
    "@hedgedoc/html-to-react": "^1.4.5",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^7.1.2",
    "@types/esri-leaflet-geocoder": "^2.2.3",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-router-dom": "^5.1.7",
    "@unform/core": "^2.1.3",
    "@unform/web": "^2.1.3",
    "antd": "^5.10.2",
    "antd-img-crop": "^4.13.0",
    "antd-mask-input": "^0.1.15",
    "axios": "^0.21.1",
    "base-64": "^1.0.0",
    "cep-promise": "^4.1.0",
    "cpf-cnpj-validator": "^1.0.3",
    "date-fns": "^2.24.0",
    "esri-leaflet": "^3.0.8",
    "esri-leaflet-geocoder": "^3.1.3",
    "faker": "^5.5.1",
    "file-saver": "^2.0.5",
    "gerador-validador-cpf": "^5.0.2",
    "history": "^5.0.0",
    "i18n-js": "^3.9.2",
    "js-file-download": "^0.4.12",
    "jwt-decode": "^3.1.2",
    "leaflet": "^1.7.1",
    "leaflet-control-geocoder": "^2.4.0",
    "leaflet-geosearch": "^3.3.2",
    "leaflet.markercluster": "^1.5.3",
    "miragejs": "^0.1.41",
    "moment": "^2.29.1",
    "pdfmake": "^0.2.4",
    "polished": "^4.1.1",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-audio-player": "^0.17.0",
    "react-color": "^2.19.3",
    "react-countdown-circle-timer": "^3.2.1",
    "react-dom": "^16.13.1",
    "react-google-recaptcha": "^2.1.0",
    "react-helmet": "^6.1.0",
    "react-highlight-words": "^0.17.0",
    "react-icons": "^4.2.0",
    "react-infinite-scroll-component": "^6.1.0",
    "react-leaflet": "^3.2.0",
    "react-leaflet-cluster": "^1.0.3",
    "react-leaflet-markercluster": "^3.0.0-rc1",
    "react-number-format": "^4.7.3",
    "react-phone-number-input": "^3.1.47",
    "react-player": "^2.9.0",
    "react-query": "^3.19.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "react-spring": "^8.0.27",
    "react-toastify": "^7.0.3",
    "react-video-js-player": "^1.1.1",
    "simple-react-lightbox": "^3.6.9-0",
    "styled-components": "^5.2.0",
    "typescript": "^5.1.6",
    "uuidv4": "^6.2.6",
    "webpack-dev-server": "3.11.0",
    "yup": "^0.29.3"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jest-environment-jsdom-sixteen",
    "eject": "react-app-rewired eject"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/pages/**/*.tsx",
      "src/components/**/*.tsx",
      "src/hooks/*.tsx",
      "!src/hooks/index.tsx"
    ],
    "moduleNameMapper": {
      "~(.*)$": "<rootDir>/src/$1"
    }
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@testing-library/react-hooks": "^5.1.0",
    "@types/base-64": "^1.0.0",
    "@types/faker": "^5.1.7",
    "@types/file-saver": "^2.0.5",
    "@types/i18n-js": "^3.8.2",
    "@types/leaflet": "^1.7.3",
    "@types/pdfmake": "^0.1.20",
    "@types/react-color": "^3.0.6",
    "@types/react-google-recaptcha": "^2.1.0",
    "@types/react-helmet": "^6.1.0",
    "@types/react-highlight-words": "^0.16.3",
    "@types/react-infinite-scroll-component": "^5.0.0",
    "@types/react-leaflet-markercluster": "^3.0.0",
    "@types/simple-react-lightbox": "^3.6.1",
    "@types/styled-components": "^5.1.3",
    "@types/yup": "^0.29.7",
    "@typescript-eslint/eslint-plugin": "^6.9.1",
    "@typescript-eslint/parser": "^6.9.1",
    "babel-eslint": "^10.1.0",
    "babel-plugin-root-import": "^6.6.0",
    "customize-cra": "^1.0.0",
    "docz": "^2.3.1",
    "eslint": "6.8.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.12.0",
    "eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
    "eslint-import-resolver-typescript": "^2.3.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^2.5.0",
    "jest-environment-jsdom-sixteen": "^1.0.3",
    "prettier": "^2.1.2",
    "react-app-rewired": "^2.1.8",
    "react-test-renderer": "^17.0.1"
  }
}

我已经尝试更新@typescript-eslint/parser和@typescript-eslint/eslint-plugin到v6.9.1，但问题依然存在。

解决方法 #

核心原因

这个错误是ESLint核心版本过低导致的：你当前使用的ESLint是6.8.0，而@typescript-eslint v6.x版本要求ESLint核心版本至少为8.28.0，版本不兼容引发了废弃API的调用错误。

具体步骤

1. 升级ESLint核心版本
   执行命令安装兼容版本：

npm install eslint@^8.28.0 --save-dev
# yarn用户执行：
# yarn add eslint@^8.28.0 --dev

2. 同步升级相关ESLint插件到适配版本
   需要把以下依赖升级到支持ESLint 8.x的版本：

npm install eslint-config-airbnb@^19.0.4 eslint-plugin-import@^2.29.0 eslint-plugin-jsx-a11y@^6.8.0 eslint-plugin-react@^7.33.2 eslint-plugin-react-hooks@^4.6.0 eslint-config-prettier@^9.0.0 eslint-plugin-prettier@^5.0.1 --save-dev

3. 调整ESLint配置文件
   打开你的.eslintrc.js（或.eslintrc），确保配置如下：

• 替换babel-eslint为@typescript-eslint/parser
• 配置正确的parser选项
• 继承@typescript-eslint的推荐规则

示例配置：

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  rules: {
    // 根据项目需求调整规则，比如关闭React版本检查
    'react/react-in-jsx-scope': 'off',
    // 其他自定义规则...
  },
  settings: {
    'import/resolver': {
      typescript: {},
      'babel-plugin-root-import': {}
    }
  }
};

4. 清理依赖并重新安装

rm -rf node_modules package-lock.json
npm install

额外注意事项

你当前使用的react-scripts是3.4.3，这个版本比较老旧，和TypeScript 5.x存在潜在兼容性问题。如果上述步骤执行后仍有其他错误，可以考虑升级react-scripts到4.x或5.x版本，但升级时需要注意同步调整其他相关依赖（比如React、ReactDOM版本），建议先备份项目再操作。

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