解析错误：找不到模块“next/babel”

Question

我在创建的每个新 Next.js 项目中都遇到过这个错误。该页面可以正常编译，只是在每个js文件的第一行一直显示为错误。

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

• D:\app\next_app\ratu-seo\node_modules\next\dist\compiled\babel\bundle.js
• D:\app\next_app\ratu-seo\node_modules\next\dist\compiled\babel\eslint-parser.js
• D:\app\next_app\ratu-seo\node_modules\eslint-config-next\parser.js
• D:\app\next_app\ratu-seo\node_modules@eslint\eslintrc\lib\config-array-factory.js
• D:\app\next_app\ratu-seo\node_modules@eslint\eslintrc\lib\index.js
• D:\app\next_app\ratu-seo\node_modules\eslint\lib\cli-engine\cli-engine.js
• D:\app\next_app\ratu-seo\node_modules\eslint\lib\cli-engine\index.js
• D:\app\next_app\ratu-seo\node_modules\eslint\lib\api.js
• c:\Users\Admin.vscode\extensions\dbaeumer.vscode-eslint-2.1.23\server\out\eslintServer.js

Answer 1

在您的根目录中创建名为 .babelrc 的文件并添加此代码

{
  "presets": ["next/babel"],
  "plugins": []
}

并在 .eslintrc 中将现有代码替换为

{
  "extends": ["next/babel"]
}