React+TS+Webpack项目运行ESLint提示Must use import to load ES Module错误如何解决

数据老陈

2026-9-30

问题修复方案

根因

你遇到的报错和业务代码是否使用require语法无关，是依赖版本不兼容导致的：

你当前使用的babel-eslint已经正式废弃，最高仅支持ESLint 7及更低版本，你本地安装的是ESLint 8，版本不匹配是核心原因。
旧版babel-eslint内部使用CommonJS的require语法加载ESLint 8的依赖，而ESLint 8的相关依赖已经切换为ES Module格式，就触发了加载规则冲突。
你是TypeScript项目，也不应该使用babel-eslint作为ESLint解析器，缺少对TS语法的原生适配。

修复步骤

卸载废弃的旧解析器

npm uninstall babel-eslint tslint

注：tslint也已经正式废弃，当前TS生态统一使用ESLint做代码校验，可同步卸载。

安装适配ESLint 8+的TS解析器（你已经安装了@typescript-eslint/eslint-plugin，只需补装对应解析器）

npm install @typescript-eslint/parser --save-dev

修改.eslintrc配置文件，替换解析器配置：

{
  "extends": [
    "airbnb", 
    "prettier",
    "plugin:@typescript-eslint/recommended" // 新增TS推荐规则
  ],
  "parser": "@typescript-eslint/parser", // 替换原babel-eslint
  "plugins": ["prettier", "@typescript-eslint"],
  "parserOptions": {
    "ecmaVersion": "latest", // 替换原8，支持最新ECMA语法
    "project": "./tsconfig.eslint.json", // 关联TS配置文件
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "impliedStrict": true,
      "classes": true,
      "jsx": true // 新增，支持JSX语法解析
    }
  },
  // 其余原有env、rules配置保持不变即可
}