已声明默认导出却提示未找到？模块导入兼容问题排查

核心问题分析 #

你的项目启用了ES Module（package.json设置"type": "module"），依赖jsheatmap编译后为CommonJS格式，且通过exports.default = Sterno导出默认值，同时TS配置了esModuleInterop: true，但仍出现默认导入失败的报错，本质是ESM与CommonJS模块在不同工具链下的解析规则兼容问题。

可能的解决方案 #

1. 检查依赖包的package.json配置 #

查看node_modules/jsheatmap/package.json：

• 确认"main"字段指向编译后的lib/index.js，确保工具能找到正确的入口文件。
• 若存在"type": "module"字段，删除或改为"type": "commonjs"——因为该模块实际是CommonJS格式，ESM解析器会错误地将其当作ESM模块处理，此时exports.default会被识别为命名导出而非默认导出。

2. 修改导入语句为兼容写法 #

直接绕开默认导入的兼容问题，手动获取CommonJS导出对象上的default属性：

import * as jsheatmap from "jsheatmap";
const HeatMap = jsheatmap.default;
const { Style } = jsheatmap;

3. 补充TS配置项 #

在tsconfig.json中添加：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

allowSyntheticDefaultImports允许TS从无默认导出的模块中导入默认值，与esModuleInterop配合可更好地兼容CommonJS模块的默认导出。

4. 调整打包工具配置（以Webpack为例） #

如果使用Webpack作为打包工具：

• 在webpack.config.js中添加或修改resolve配置，确保工具优先识别正确的模块入口：

  module.exports = {
    resolve: {
      mainFields: ["module", "main"],
      exportsFields: ["exports"]
    }
  };
  

• 检查处理JS/TS的loader（如ts-loader或babel-loader），确保其配置与TS的esModuleInterop保持一致，避免转译过程中破坏导出结构。

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