React 16升级至18后生产构建遇ESLint相关导入错误求助

问题概述 #

将React应用从16版本升级至18版本后，生产流水线构建时触发以下错误，但本地构建正常：

Syntax error: import_typescript.default.isTokenKind is not a function (0:undefined)

该问题在升级ESLint相关依赖后出现：原依赖为@typescript-eslint/eslint-plugin@^4.6.0、@typescript-eslint/parser@^4.6.0、eslint-plugin-react@^7.21.5，升级至@typescript-eslint/*@^6.7.0、eslint-plugin-react@^7.33.2后触发错误。

可能原因 #

1. 依赖版本不兼容：@typescript-eslint v6.x要求ESLint版本≥8.28.0，但react-scripts 5.0.1内置的ESLint版本低于该要求，导致依赖冲突，出现导入错误。
2. ESLint配置冲突：项目同时存在package.json中的eslintConfig字段和自定义.eslintrc.json配置，两者叠加导致解析逻辑混乱。

解决方案 #

1. 降级@typescript-eslint至兼容版本 #

由于react-scripts 5.0.1内置的ESLint版本无法匹配@typescript-eslint v6.x的要求，将@typescript-eslint系列依赖降级至兼容ESLint 7/8的v5.x最新版：
修改package.json中的devDependencies：

"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",

2. 清理ESLint配置冲突 #

移除package.json中的eslintConfig字段，避免和自定义.eslintrc.json重复叠加：
删除以下内容：

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
},

并在.eslintrc.json的extends中添加react-app规则集，确保React相关的ESLint规则生效：

"extends": [
  "eslint:recommended",
  "plugin:react/recommended",
  "plugin:@typescript-eslint/eslint-recommended",
  "react-app"
],

3. 清理依赖缓存并重新安装 #

在本地和生产流水线执行以下命令，确保依赖完全更新：

# 清理旧依赖和锁文件
rm -rf node_modules package-lock.json yarn.lock
# 重新安装依赖
npm install # 或 yarn install

4. 验证修复 #

本地先执行以下命令确认无错误：

yarn lint
yarn build:production

确认本地构建正常后，再推送代码至生产流水线执行构建。

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