Next.js / ESLint – “解析错误：找不到模块‘next/babel’”

Question

每次我创建 Next.js 应用程序时：

`npx create-next-app@latest`

ESLint 立即开始在我的所有 .js 文件中闪烁警告：

“解析错误：找不到模块‘next/babel’ 需要堆栈：

• /用户//node_modules/next/dist/compiled/babel/bundle.js
• /用户//node_modules/next/dist/compiled/babel/eslint-parser.js
• /用户//node_modules/eslint-config-next/parser.js
• /用户//node_modules/@eslint/eslintrc/dist/eslintrc.cjs

确保您使用的所有 Babel 插件和预设 在 package.json 中定义为依赖项或 devDependency 文件。缺少的插件可能是由预设加载的 您正在使用忘记将插件添加到其依赖项中：您 可以通过显式添加缺少的包来解决此问题 到你的顶级 package.json.eslint"

我尝试过重新安装和创建新项目、清理缓存、重新启动 VSCode...但没有任何效果。

我在 Stack Overflow 和 GitHub 上找到了其他论坛帖子，说您应该将此代码添加到您的 .eslintrc.json 文件中：

{
  "extends": ["next/babel","next/core-web-vitals"]
}

然而，虽然这个“hack”消除了 ESLint 突出显示错误，但它反而会在构建/部署时或每当您运行 npx eslint .

时导致错误。 ESLint 然后给出以下错误消息：

ESLint 找不到要扩展的配置“next/babel”。请检查配置名称是否正确。

配置“next/babel”是从“/Users/henrikangelstig/react-course/21-the-wild-oasis-website/my-react/.eslintrc.json”中的配置文件引用的。

有谁知道解决方案：

删除了错误“解析错误：找不到模块‘next/babel’”...
...但是
2. without 导致在构建/部署或运行时出现“ESLint 无法找到要扩展的配置“next/babel””错误 npx eslint .

   ??

Answer 1

我终于找到解决办法了！！

此 GitHub 线程上的用户 paescuj 建议将以下代码添加到您的 .eslintrc.json

 文件中：

{
  "extends": ["next/core-web-vitals", "prettier"],
  "rules": {
    "no-undef": "error",
    "no-unused-vars": "warn",
    "no-unused-expressions": "warn",
    "no-extra-semi": "warn"
  },
  "overrides": [
    {
      "files": ["*.js", "*.mjs"],
      // This is the default parser of ESLint
      "parser": "espree",
      "parserOptions": {
        "ecmaVersion": "latest"
      }
    }
  ],
  // Ensures no errors that "Promise is undefined"
  "env": {
    "browser": true,
    "es6": true
  }
}

这个效果非常好！

没有错误“解析错误：找不到模块‘next/babel’”！！
在构建/部署或运行时没有错误“ESLint 无法找到要扩展的配置“next/babel””错误
2. npx eslint

   !!

更重要的是，

它还带回了之前未显示的 ESLint 缺失的错误和警告突出显示。每次我尝试将我的自定义规则添加到.eslintrc.json

时，例如：

"rules": {
    "no-undef": "error",
    "no-unused-vars": "warn",
    "no-unused-expressions": "warn",
    "no-extra-semi": "warn"
 }

...他们只会被忽略。使用上面的代码，我的规则现在再次适用，并且 ESLint 按预期显示警告和错误。

我强烈建议使用此解决方案，而不是“黑客”：

{
  "extends": ["next/babel","next/core-web-vitals"]
}