如何解决Next.js执行npm run build构建命令时出现的ESLint报错问题

你遇到的这两个问题其实是相关联的：babel-eslint 已停止维护，无法兼容ESLint 8.x版本，同时你的ESLint配置缺少Next.js专属插件支持，导致构建时出现解析错误和警告。以下是分步修复方案：

1. 替换废弃的babel-eslint依赖 #

babel-eslint早在几年前就停止更新了，ESLint 8+版本完全不兼容它的模块引入方式。我们需要用官方维护的@babel/eslint-parser替代它：

# 卸载旧依赖
npm uninstall babel-eslint

# 安装新的兼容依赖
npm install --save-dev @babel/eslint-parser @babel/core

2. 添加Next.js ESLint官方插件 #

解决"未检测到Next.js插件"的警告，同时让ESLint更好适配Next.js的页面路由、SSR等特性：

npm install --save-dev eslint-config-next

3. 更新.eslintrc配置 #

修改你的ESLint配置文件，替换解析器并加入Next.js规则：

{
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "babelOptions": {
      "presets": ["next/babel"] // 关联Next.js的Babel预设，确保解析正确
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "extends": [
    "airbnb",
    "next/core-web-vitals" // 引入Next.js核心规则，自动解决插件检测警告
  ],
  "plugins": [
    "import",
    "react-hooks",
    "react"
  ],
  "rules": {
    "jsx-a11y/label-has-associated-control": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "no-console": "off",
    "no-underscore-dangle": "off",
    "react/forbid-prop-types": "off",
    "react/jsx-filename-extension": "off",
    "object-curly-newline": "off",
    "linebreak-style": "off",
    "no-param-reassign": "off"
  }
}

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

为了避免旧依赖缓存干扰，执行以下操作：

# Windows系统请用：rmdir /s /q node_modules && del package-lock.json
rm -rf node_modules package-lock.json
npm install

5. 验证修复 #

重新运行构建命令：

npm run build

为什么这样能解决问题？ #

• @babel/eslint-parser是Babel官方维护的ESLint解析器，完全兼容ESLint 8.x版本，解决了require()模块的解析错误；
• eslint-config-next会自动引入Next.js的ESLint插件和适配规则，既消除了插件缺失的警告，也能更好地检查Next.js项目的代码规范。

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