Next.js11.1设置package.json的type:module后next.config.js报ESM不支持错误

推荐方案：回退模块规范，用babel插件实现antd按需引入（适配当前Next 11.1 + Node12环境，改动最小） #

你添加"type": "module"的核心诉求是解决antd手动按需引入的模块报错，完全可以通过更成熟的按需引入插件规避，不用调整全局模块规范：

• 第一步：删除package.json中的"type": "module"配置，Next 11.1默认仅支持CommonJS格式的配置文件，添加该配置会让所有.js文件被识别为ESM，触发内部require加载next.config.js的报错。
• 第二步：安装按需引入插件babel-plugin-import：

npm install babel-plugin-import -D

• 第三步：项目根目录新增.babelrc配置文件，内容如下：

{
  "presets": ["next/babel"],
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "style": true
    }]
  ]
}

如果你的项目用css而非less样式，把style的值改为"css"即可。

• 第四步：代码中antd的引入方式直接改回import { Row, Col } from 'antd'，插件会自动编译为按需引入的路径，不会产生全量打包问题，同时不会触发模块语法报错。

备选方案：保留ESM规范，适配Next配置文件格式 #

如果你的项目确实需要全局使用ESM规范，可以通过修改配置文件后缀解决加载问题：

• 保留package.json中的"type": "module"配置
• 将根目录的next.config.js重命名为next.config.mjs，原有配置代码无需改动，Next 11.1原生支持.mjs后缀的ESM格式配置文件。

注意该方案需要同步调整项目中其他CommonJS规范的.js文件，要么改为ESM语法，要么将后缀改为.cjs避免模块识别冲突。

内容的提问来源于stack exchange，提问作者tam.dangc