导入Veriff JS SDK时触发TypeError错误，该如何解决？

问题背景 #

导入Veriff JS SDK时触发错误：

TypeError: _veriff_js_sdk__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function

相关业务代码：

import { Component, OnInit } from '@angular/core';
import Veriff from '@veriff/js-sdk';

@Component({
  selector: 'hp',
  templateUrl: './hp.component.html',
  styleUrls: ['./hp.component.css']
})
export class HPComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    const v = Veriff({
      host:'',
      apiKey:'',
      parentId:'',
      onSession: (err:any, res:any) => {
        // 回调逻辑
      }
    });
  }
}

已尝试的tsconfig配置：

{
  "compileOnSave": false,
  "compilerOptions": {
    ...
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
  },
  "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
  }
}

解决方案 #

• 修正导入方式
  Veriff JS SDK的导出结构可能不支持默认导入，改用命名导入：

  import { Veriff } from '@veriff/js-sdk';
  

  若仍无效，尝试兼容CommonJS的导入方式：

  const Veriff = require('@veriff/js-sdk').default;
  

• 更新SDK版本
  旧版本SDK可能存在导出逻辑问题，安装最新稳定版：

  npm install @veriff/js-sdk@latest
  

• 完善tsconfig配置
  确保compilerOptions中的module设置为适配ES模块的选项，避免配置冲突：

  "compilerOptions": {
    "module": "ESNext",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    // 其他原有配置
  }
  

• 检查初始化参数合法性
  虽然不是直接触发该错误的原因，但确保host、apiKey、parentId填写正确，空值可能引发后续异常。

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