Next.js添加App目录后Antd组件出现import语句模块外使用错误

解决方案步骤 #

1. 锁定Antd及相关依赖版本 #

重新安装时可能拉取了不兼容的依赖版本，引发ESM/CJS模块冲突。在package.json中指定稳定兼容的版本，示例：

{
  "dependencies": {
    "antd": "^5.12.8",
    "rc-util": "^5.38.1",
    "rc-tooltip": "^6.1.2",
    "rc-input": "^1.2.4"
    // 其他依赖保持原有配置
  }
}

执行命令重新安装依赖：

rm -rf node_modules package-lock.json
npm install

2. 扩展next.config.js的transpilePackages配置 #

仅转译antd不足以覆盖其所有依赖的rc系列包，需将报错的相关rc包一并加入转译列表：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['antd', 'rc-util', 'rc-tooltip', 'rc-input', 'rc-motion', 'rc-trigger'],
  // 保留原有其他配置项
}

module.exports = nextConfig

注：若后续出现其他rc包的同类错误，直接将对应包名添加到transpilePackages数组即可。

3. 移除package.json中的"type": "module"配置 #

Next.js App Router有自身的模块解析逻辑，添加"type": "module"会干扰其正常处理，直接删除该配置项。

4. 规范组件导入方式 #

确保从antd主包导入组件，避免使用子路径导入：

// 正确写法
import { Tooltip, Input } from 'antd';

// 错误写法（禁止使用）
import Tooltip from 'antd/lib/tooltip';
import Input from 'antd/lib/input';

5. 清除缓存并重新构建 #

执行以下命令清除Next.js缓存和旧构建文件，确保新配置生效：

rm -rf .next
npm run build
npm run dev

原因说明 #

该报错本质是Next.js App Router对部分第三方ESM格式包的转译处理不充分。Antd的依赖包（如rc-util、rc-tooltip等）多采用ESM发布，但Next.js默认不会转译这些包，导致运行时出现模块解析错误。通过扩展transpilePackages覆盖所有相关依赖、锁定兼容版本、调整模块解析配置，即可解决冲突。

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