使用Esbuild构建CJS时导入混合模块默认导出异常问题

问题根源 #

你遇到的问题是esbuild在将ESM代码编译为CJS格式时，对euberlog这个混合模块的导出结构处理出现偏差。当你用import logger from 'euberlog'导入时，esbuild会把它转换为CJS的require调用，但euberlog的CJS导出结构存在双层嵌套的default，导致你拿到的导入对象里logger.default才是实际的日志实例，直接调用logger.default.info自然会报错。

可行解决方案 #

方案1：手动修正导入对象 #

在代码里添加一层判断，取出实际可用的日志实例：

import logger from 'euberlog';
// 兼容双层default的情况
const actualLogger = logger.default ?? logger;

// 之后使用actualLogger调用方法
actualLogger.info('测试日志');

或者直接在导入时解构处理：

import { default as rawLogger } from 'euberlog';
const logger = rawLogger.default ?? rawLogger;

方案2：调整esbuild的mainFields配置 #

修改你的build配置，指定构建CJS版本时优先读取euberlog的CJS入口文件，让esbuild能正确识别导出结构：

build({
    ...shared,
    outfile: 'bundled/lib/commonjs/index.js',
    format: 'cjs',
    external: getExternalDependencies(),
    // 优先读取package.json里的main字段（CJS入口），再读module字段
    mainFields: ['main', 'module']
});

这个配置会让esbuild在处理外部依赖时，优先使用模块的CJS导出，避免ESM和CJS导出结构不匹配导致的嵌套问题。

方案3：直接使用命名导入 #

如果euberlog支持命名导入，也可以直接导入默认实例：

import { default as logger } from 'euberlog';

不过这个方法可能还是需要结合方案1的判断，具体取决于euberlog的导出实现。

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