Next.js项目运行ESLint时出现parse键序列化错误求助

问题根源 #

这个错误是因为你的ESLint配置中，parser或parserOptions字段使用了函数类型的值。Next.js的lint缓存机制需要序列化配置内容，而函数无法被序列化，清除.next/cache后重新生成配置时就会触发该报错。

具体修复步骤 #

1. 修改ESLint配置 #

你使用了@eslint/eslintrc的FlatCompat扩展配置，需要排查配置中是否存在函数类型的parse选项，将其替换为ESLint支持的字符串类型解析器。

假设你的原配置（如eslint.config.js）存在类似问题代码：

const { FlatCompat } = require('@eslint/eslintrc');
const compat = new FlatCompat();

module.exports = [
  ...compat.extends('next/core-web-vitals'),
  {
    parser: {
      parse: (code) => { /* 自定义解析逻辑 */ }, // 此处的函数是报错根源
    },
    rules: {
      '@next/next/no-img-element': 'off',
      // 其他自定义规则
    }
  }
];

修改为字符串类型解析器（例如使用TypeScript解析器，或Next.js默认解析器）：

const { FlatCompat } = require('@eslint/eslintrc');
const compat = new FlatCompat();

module.exports = [
  ...compat.extends('next/core-web-vitals'),
  {
    parser: '@typescript-eslint/parser', // 替换为字符串类型的解析器
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      project: './tsconfig.json' // 若使用TypeScript则添加该配置
    },
    rules: {
      '@next/next/no-img-element': 'off',
      // 其他自定义规则
    }
  }
];

2. 验证修复效果 #

• 手动清除缓存：rm -rf .next/cache（Windows系统执行rmdir /s /q .next\cache）
• 重新运行lint命令：npm run lint
• 执行构建命令：npm run build，确认错误消失，自定义规则正常生效。

3. 额外排查点 #

• 检查next.config.mjs的eslint配置段，确保没有使用函数类型的配置项，全部改为对象格式
• 若问题仍存在，更新相关依赖到稳定版：

  npm update eslint @eslint/eslintrc next
  

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