ESLint 9构建时读取配置文件失败，需更新Webpack配置？

问题 #

• 使用ESLint 9版本，单独执行eslint命令检测文件/文件夹时，规则与插件均正常工作。
• 应用构建阶段，webpack-stream抛出错误：无法读取eslint.config.mjs，错误信息为end of the stream or a document separator is expected (7:19)。

相关配置 #

eslint.config.mjs

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";


export default [
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
];

package.json中的ESLint相关依赖

{
  "@typescript-eslint/eslint-plugin": "^7.10.0",
  "@typescript-eslint/parser": "^7.10.0",
  "eslint": "^9.3.0",
  "eslint-config-airbnb-base": "^15.0.0",
  "eslint-config-prettier": "^9.1.0",
  "eslint-formatter-summary": "^1.1.0",
  "eslint-plugin-import": "^2.29.1",
  "eslint-plugin-lit": "^1.13.0",
  "eslint-plugin-sonarjs": "^1.0.3",
  "eslint-plugin-wc": "^2.1.0",
  "eslint-webpack-plugin": "^4.1.0"
}

Webpack中的ESLint插件配置

new ESLintPlugin({
  quiet: true,
  failOnError: true,
  outputReport: true,
  overrideConfigFile: join(dirname, 'eslint.config.mjs'),
  exclude: [
    `model`,
    `dist`,
    `node_modules`,
    `buildlocales`
  ]
}),

构建错误日志

[PluginError: [eslint] Cannot read config file: eslint.config.mjs
Error: end of the stream or a document separator is expected (7:19)

 4 | 
 5 | 
 6 | export default [
 7 |   {languageOptions: { globals: globals.browser }},
-----------------------^
 8 |   pluginJs.configs.recommended,
 9 |   ...tseslint.configs.recommended,] {
  plugin: 'webpack-stream',
  showProperties: true,
  showStack: false,
  __safety: { toString: [Function: bound ] }
}
[19:04:14] assets by status 9.27 MiB [cached] 3 assets


ERROR in [eslint] Cannot read config file: eslint.config.mjs
Error: end of the stream or a document separator is expected (7:19)

 4 | 
 5 | 
 6 | export default [
 7 |   {languageOptions: { globals: globals.browser }},
-----------------------^
 8 |   pluginJs.configs.recommended,
 9 |   ...tseslint.configs.recommended,

解决方案 #

核心问题 #

你当前使用的eslint-webpack-plugin@4.1.0仅支持ESLint 8版本，无法兼容ESLint 9引入的扁平ESM配置文件（eslint.config.mjs）。旧版本插件会错误地将ESM配置文件当作JSON格式解析，导致语法报错。

具体步骤 #

1. 升级eslint-webpack-plugin到兼容ESLint 9的版本
   执行命令：

   npm install eslint-webpack-plugin@latest --save-dev
   # 或使用yarn
   yarn add eslint-webpack-plugin@latest --dev
   

   v5.x及以上版本的eslint-webpack-plugin已支持ESLint 9。

2. 调整Webpack中的ESLintPlugin配置
   移除overrideConfigFile配置项——ESLint 9会自动识别项目根目录下的eslint.config.mjs，无需手动指定。修改后的配置如下：

   new ESLintPlugin({
     quiet: true,
     failOnError: true,
     outputReport: true,
     exclude: [
       `model`,
       `dist`,
       `node_modules`,
       `buildlocales`
     ]
   }),
   

3. 可选验证优化
   若仍有问题，可检查：

   • 确认@typescript-eslint等插件版本与ESLint 9兼容（当前你的@typescript-eslint@7.10.0已满足要求）
   • 移除eslint.config.mjs中不必要的尾随逗号（虽ESM允许，但可避免潜在解析问题）

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