客户端TypeScript报错：apexcharts_1.default不是构造函数，如何解决？

问题 #

我的项目是运行在浏览器中的TypeScript代码，使用以下tsconfig.json配置转译JavaScript：

{
  "compilerOptions": {
    "target": "es6",                                
    "sourceMap": true,       
    "outDir": "../www/",
    "rootDirs": ["./", "../src"],
    "module": "commonjs",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true       
  },
  "files": [
    "client.ts"
  ],
  "exclude": [
    "node_modules",
    "./node_modules",
    "./node_modules/*",
    "./node_modules/@types/node/index.d.ts",
  ]
}

我在代码中这样使用ApexCharts：

import ApexCharts from 'apexcharts';

// ...其他代码

deviceCard.chart = new ApexCharts(document.querySelector(`#${newCard.serial}chart`), options);
deviceCard.chart.render();

经tsc转译后，代码变为：

deviceCard.chart = new apexcharts_1.default(document.querySelector(`#${newCard.serial}chart`), options);
deviceCard.chart.render();

因为无法从node模块导入ApexCharts到浏览器，我直接下载了ApexCharts的CDN文件到本地，再用browserify打包所有内容。但在浏览器运行时出现报错：

TypeError: apexcharts_1.default is not a constructor

解决方案 #

方法1：改用全局变量引用 #

由于你是通过本地文件引入ApexCharts（类似CDN引入逻辑），它会在全局作用域暴露ApexCharts变量，无需使用ES模块导入。修改TypeScript代码：

// 移除import语句，声明全局变量以通过TS类型检查
declare var ApexCharts: any;

// ...其他代码

deviceCard.chart = new ApexCharts(document.querySelector(`#${newCard.serial}chart`), options);
deviceCard.chart.render();

转译后不会生成apexcharts_1.default相关代码，直接调用全局的ApexCharts构造函数。

方法2：调整tsconfig配置适配模块导出 #

ApexCharts的CommonJS导出未提供default属性，在tsconfig.json的compilerOptions中添加esModuleInterop: true：

{
  "compilerOptions": {
    // ...原有配置
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true       
  }
}

该配置会让TypeScript自动处理CommonJS模块的默认导入逻辑，转译后的代码将兼容无default导出的模块。

方法3：修改导入语句直接取模块导出 #

若不想调整配置，可修改TypeScript导入方式，直接引用整个模块的导出值：

// 导入整个模块，直接使用模块本身作为构造函数
import * as ApexCharts from 'apexcharts';

// ...其他代码

deviceCard.chart = new ApexCharts(document.querySelector(`#${newCard.serial}chart`), options);
deviceCard.chart.render();

转译后代码会变为new apexcharts_1(...)，而非apexcharts_1.default，可正确调用构造函数。

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