Electron中CalHeatmap资源加载失败及MIME类型错误求助

问题概述 #

在Electron中测试应用时，先后遇到两个核心问题：

• 初始导入CalHeatmap时出现「Resource of CalHeatmap not found」错误，VSCode可跳转源码但npm start执行时资源加载失败
• 修改为相对路径导入类型文件和CSS后，触发错误：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

注：该组件在Vite项目中可正常运行，但Electron环境下异常，核心问题集中在load.js的导入逻辑和index.html的模块脚本配置。

错误原因 #

1. 模块路径解析差异：Vite会自动处理npm包的模块解析，但Electron原生的ES模块加载机制不支持直接通过包名导入，且直接导入node_modules内文件时，路径解析规则与开发服务器不同。
2. CSS模块加载限制：ES模块规范要求导入的脚本必须是JS类型，Electron的文件协议返回CSS文件的MIME类型为text/css，不符合模块脚本的MIME类型要求，导致报错。
3. 错误导入类型文件：直接导入index.d.ts类型文件无法在运行时提供实际的JS逻辑，属于误用。

解决方案 #

方案1：手动调整导入方式（无需打包工具） #

1. 移除JS模块中的CSS导入，将CSS直接通过<link>标签引入到index.html的<head>中：

<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- 更新CSP规则，允许加载样式 -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';" />
    <!-- 直接引入CSS文件 -->
    <link rel="stylesheet" href="./node_modules/cal-heatmap/dist/cal-heatmap.css">
</head>

2. 修正CalHeatmap的JS导入路径，指向实际的编译后JS文件，而非包根目录或类型文件：

// load.js
import CalHeatmap from './node_modules/cal-heatmap/dist/cal-heatmap.js';

// 后续初始化代码保持不变
const cal = new CalHeatmap();
// ...
cal.paint(_data);

方案2：使用包名导入+Electron模块解析配置（推荐） #

如果希望保留包名导入的方式，需要让Electron支持裸模块导入：

1. 确保已安装依赖：npm install cal-heatmap @electron/esbuild
2. 在Electron主进程中配置@electron/esbuild处理模块解析，或使用electron-vite等集成方案，让构建工具自动处理npm包的导入和资源打包。
3. 保持load.js的简洁导入：

import CalHeatmap from 'cal-heatmap';
import 'cal-heatmap/cal-heatmap.css';

方案3：迁移到Vite+Electron架构 #

既然组件在Vite中可正常运行，直接使用vite-plugin-electron搭建项目，完全复用Vite的模块解析能力，避免Electron原生加载的兼容性问题。

验证 #

修改完成后执行npm start启动Electron应用，检查控制台无报错，页面中#cal-heatmap容器正常渲染热力图即为修复成功。

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