在Next.js中使用antd-img-crop报错：无法在模块外使用import语句

我在使用Ant Design开发时需要实现图片裁剪功能，因此引入了antd-img-crop库。但在Next.js项目中安装并使用该库后，执行npm run build构建时出现如下错误：

import LocaleReceiver from '../locale/LocaleReceiver';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (F:\samyar\react\gharardad-pardaz\node_modules\antd-img-crop\dist\antd-img-crop.cjs.js:21:22)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)

> Build error occurred
Error: Failed to collect page data for /app/profile
    at F:\samyar\react\gharardad-pardaz\node_modules\next\dist\build\utils.js:960:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}

复现步骤 #

• 创建或使用现有Next.js项目
• 安装antd-img-crop库
• 在页面组件中引入并使用antd-img-crop
• 执行npm run build命令构建项目
• 触发上述错误

解决方案 #

该错误源于antd-img-crop的CommonJS构建产物中包含ES模块语法，Next.js在服务端渲染阶段无法正确解析这类语法，可通过以下两种方式解决：

方式一：配置Next.js转译指定包 #

在项目根目录的next.config.js中添加transpilePackages配置，让Next.js对antd-img-crop进行转译处理：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['antd-img-crop'],
}

module.exports = nextConfig

方式二：客户端动态导入组件 #

如果方式一未解决问题，可尝试禁用服务端渲染，仅在客户端动态导入antd-img-crop组件：

import dynamic from 'next/dynamic'

// 动态导入，禁用服务端渲染
const ImgCrop = dynamic(() => import('antd-img-crop').then(mod => mod.default), {
  ssr: false,
})

// 组件中使用示例：
// <ImgCrop>
//   <Upload {...uploadProps} />
// </ImgCrop>

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