如何修复TypeScript+Webpack环境下ExtPay is not a function错误

问题分析 #

你遇到的两个错误本质是：

• TS2552：TypeScript无法识别全局的ExtPay变量，直接导入模块后既无类型声明，模块也未正确挂载全局变量
• TypeError: ExtPay is not a function：用require导入时未拿到正确的导出对象——ExtPay的npm包采用UMD导出结构，直接require得到的是包含default属性的容器对象

解决方案 #

1. 采用正确的模块导入方式

替换原有导入代码，使用ES模块默认导入：

import ExtPay from 'extpay';
const extpay = ExtPay('sample-extension');

如果坚持用CommonJS风格导入，需明确获取default属性：

const ExtPay = require('extpay').default;
const extpay = ExtPay('sample-extension');

2. 补全TypeScript类型声明

由于官方暂未提供官方类型包，需手动添加类型声明：
在项目src目录下创建types/extpay.d.ts文件，内容如下：

declare module 'extpay' {
  interface ExtPayInstance {
    getUser(): Promise<any>;
    openPaymentPage(): void;
    onPaid(callback: () => void): void;
    // 可根据你用到的ExtPay API补充更多类型定义
  }

  export default function ExtPay(extensionId: string): ExtPayInstance;
}

然后在tsconfig.json中确保类型文件被纳入解析范围：

{
  "include": ["src/**/*", "src/types/**/*"]
}

3. Webpack配置检查（可选）

如果打包后仍有模块解析问题，确认以下配置：

• 你的resolve.extensions已包含.js，Webpack可正常解析npm包内的JS文件
• 无需将ExtPay设为externals，它需要被打包进background脚本中运行

验证步骤 #

1. 重启Webpack开发服务
2. 查看background脚本的打包输出，确认ExtPay模块被正确引入
3. 在Chrome扩展中测试支付功能，确保extpay实例可正常调用API

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