Electron+React+TS项目引入Annotorious无类型库报错排查

问题原因 #

迁移到Electron Forge的TypeScript-Webpack模板后，Webpack对ES模块的解析规则与create-react-app存在差异，原import * as Annotorious的命名空间导入无法正确获取Annotorious的构造函数（create-react-app的默认Webpack配置做了兼容处理，而Electron Forge的模板更严格）。

解决方案 #

1. 调整导入方式为默认导入 #

@recogito/annotorious-openseadragon的ES模块采用默认导出，替换原命名空间导入：

import OpenSeadragon from "openseadragon";
//@ts-ignore
import Annotorious from "@recogito/annotorious-openseadragon";
import "@recogito/annotorious-openseadragon/dist/annotorious.min.css";

2. 修正初始化代码 #

确保在OpenSeadragon的open事件中正确调用构造函数：

const viewer = OpenSeadragon({
  // 你的Viewer配置项
});

viewer.addHandler('open', () => {
  // 直接调用默认导入的Annotorious函数
  const anno = Annotorious(viewer);
  
  // 后续标注逻辑，例如加载已有标注
  // anno.loadAnnotations('/path/to/annotations.json');
});

3. 备选方案：使用全局挂载对象 #

若默认导入仍不生效，可尝试直接访问全局对象（部分UMD模块会将构造函数挂载到window）：

import OpenSeadragon from "openseadragon";
//@ts-ignore
import "@recogito/annotorious-openseadragon"; // 仅导入模块，不赋值
import "@recogito/annotorious-openseadragon/dist/annotorious.min.css";

viewer.addHandler('open', () => {
  const anno = (window as any).Annotorious(viewer);
});

4. 检查Webpack渲染进程配置 #

确保Electron Forge的Webpack配置正确处理ES模块与CSS：
在webpack.renderer.config.js中补充或调整规则：

module.exports = {
  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js'], // 确保包含JS/JSX后缀
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader', // 转译ES模块
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'], // 正确加载Annotorious的CSS文件
      },
    ],
  },
};

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