Next.js 找不到模块 next/babel

在使用 Next.js 开发 React 项目的过程中，有时会遇到找不到模块 next/babel 的错误。这个错误通常是由于版本不兼容或配置错误导致的。

问题分析

在使用 Next.js 中的自定义 Babel 配置时，需要在 .babelrc 文件中加入 "presets": ["next/babel"] 语句，但有时会遇到如下错误：

[ error ] ./pages/_app.js: Cannot find module 'next/babel'

这是由于 Next.js 自身的版本问题，新版本可能不再支持引入 next/babel 模块，需要使用其他方式来引入 Babel 配置。

解决方案

方案一：升级 Next.js 版本

如果你的 Next.js 版本较低，可以尝试升级到最新版，看是否可解决问题。通常情况下，新版 Next.js 已经默认使用了 next/babel，无需再手动配置。

方案二：使用内嵌 Babel 配置

在 Next.js 9.3 版本之后，你可以直接使用 Next.js 内置的 Babel 配置，无需再使用 next/babel 模块。你可以在你的 next.config.js 中加入下面的代码：

module.exports = {
  babel: {
    presets: ['next/babel']
  }
}

这样就可以直接使用内置 Babel 配置，无需再引入 next/babel 模块了。

方案三：手动引入 Babel 配置

如果你坚持要手动引入 Babel 配置，你需要修改 .babelrc 文件中的配置。在 Next.js 9.3 版本之后，你需要将 "presets": ["next/babel"] 修改为 "presets": ["next/babel", { "preset-react": { "runtime": "automatic" } }]，这是由于 React 17 的变化导致的。完整的 .babelrc 配置如下：

{
  "presets": [
    "next/babel",
    {
      "preset-react": {
        "runtime": "automatic"
      }
    }
  ],
  "plugins": [
    // your custom plugins
  ]
}

方案四：使用 TypeScript

如果你使用 TypeScript 来开发 Next.js 项目，可以将 Babel 配置替换为 TypeScript 的配置，这样也能避免找不到 next/babel 的错误。你可以在你的 next.config.js 中加入下面的代码：

module.exports = {
  presets: ['next/babel', '@babel/preset-typescript']
}

注意，这里的 presets 数组中包含了 next/babel 和 @babel/preset-typescript 两个值，需要同时引入。

总结

找不到模块 next/babel 通常是由于版本不兼容或配置错误导致的。建议使用内置 Babel 配置来避免这个错误，或者手动修改 Babel 配置使其支持新版本的 Next.js。如果你使用 TypeScript 来开发项目，也可以将 Babel 配置替换为 TypeScript 的配置。