Next.js项目引入mui-tel-input后构建报错：import语句无法在模块外使用

问题原因 #

你遇到的错误是因为Next.js在服务端收集页面数据时，将mui-tel-input的ES模块文件当作CommonJS模块处理，导致无法识别import语句。你之前配置的jest.transformIgnorePatterns仅针对测试环境，对生产构建流程无效；而package.json中的"type": "module"也无法覆盖Next.js自身的模块处理逻辑。

解决方案 #

1. 配置Next.js转译指定依赖 #

在项目根目录的next.config.js中添加transpilePackages选项，让Next.js在构建时转译mui-tel-input包：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 保留你已有的其他配置项
  transpilePackages: ['mui-tel-input'],
}

module.exports = nextConfig

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

执行以下命令清除旧的构建缓存和依赖缓存，确保配置生效：

rm -rf .next node_modules
npm install
npm run build

（Windows系统执行以下命令）

rd /s /q .next node_modules
npm install
npm run build

补充说明 #

• transpilePackages是Next.js 12+引入的选项，用于指定需要转译的第三方依赖包，解决ES模块在服务端渲染时的兼容性问题。
• 若你使用自定义Babel配置，可能需要额外在babel.config.js中添加对mui-tel-input的转译规则，但Next.js 14默认使用SWC编译器，上述transpilePackages配置即可满足需求。

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