在Node.js+Next.js+MUI的ESM模式下，如何自动获取图标导入的.default？

无需移除type:"module"实现自动获取默认导出 #

有两种可行方案解决单独导入图标时需要手动取.default的问题：

方案1：用Next.js转译模块适配CommonJS #

MUI图标模块内部是CommonJS格式，在ES模块（type:"module"）环境下会出现导出结构差异，通过next-transpile-modules可以让Next.js正确转译这些模块：

1. 安装依赖：

   npm install next-transpile-modules --save-dev
   

2. 修改next.config.js配置：

   const withTM = require('next-transpile-modules')(['@mui/icons-material']);
   
   module.exports = withTM({
     // 保留你原有的Next.js配置项
   });
   

   配置完成后，直接使用import Add from "@mui/icons-material/Add"就能获取到图标组件，无需再手动访问.default。

方案2：本地封装图标导入 #

创建一个本地封装文件统一处理图标导出，避免重复编写.default逻辑：
比如在src/utils/icons.js中：

// 封装单个图标，兼容不同导出格式
const wrapIcon = (Icon) => Icon.default || Icon;

// 按需导入并封装
export const Add = wrapIcon(require("@mui/icons-material/Add").default);
export const Edit = wrapIcon(require("@mui/icons-material/Edit").default);
// 其他需要的图标同理添加

项目中使用时直接导入封装后的图标：

import { Add } from '../utils/icons';

这种方式同样不会加载所有图标，同时解决了导出适配问题。

避免全量加载图标 #

上述两种方案都是单个导入指定图标，不会触发@mui/icons-material的全量加载，完美避开开发环境性能问题，比import { Add } from "@mui/icons-material"的全量导入方式更高效。

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