Angular集成Veriff JS SDK报错：_veriff_js_sdk__WEBPACK_IMPORTED_MODULE_0__ is not a function如何解决？

问题详情 #

浏览器报错_veriff_js_sdk__WEBPACK_IMPORTED_MODULE_0__ is not a function，对应Angular组件代码及环境版本如下：

组件代码 #

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import * as Veriff from '@veriff/js-sdk';

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

  constructor(private route: ActivatedRoute, private router : Router) { }

  ngOnInit(): void {
  }

  hpclicked(){

    const veriff = Veriff({
      apiKey: 'API_KEY',
      parentId: 'veriff-root',
      onSession: function(err : Error, response : Response) {
        console.log("executed");
      }
    });
    veriff.setParams({
      person: {
        givenName: 'Foo',
        lastName: 'Bar'
      },
      vendorData: '7eb19312-79d6-11ec-90d6-0242ac120003'
    });
    veriff.mount({
      submitBtnText: 'Get verified'
    });
   
   }
}

环境版本 #

• @angular/cli 11.2.19
• typescript 4.1.6

解决方案 #

1. 修正Veriff SDK导入方式 #

报错核心原因是当前导入方式将Veriff作为模块对象而非可调用函数引入。修改导入语句为默认导出导入：

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

2. 验证SDK版本兼容性 #

Angular 11和Typescript 4.1.6属于较旧版本，需确保安装的@veriff/js-sdk版本与当前环境兼容。可以尝试安装指定版本的SDK（需根据Veriff官方文档确认兼容版本），执行命令：

npm install @veriff/js-sdk@<兼容版本号>

3. 确认类型定义有效性 #

如果存在Typescript类型报错，检查SDK是否自带类型定义，或安装对应的@types包（若有），确保类型系统能正确识别Veriff的调用方式。

修正后的完整代码示例 #

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

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

  constructor(private route: ActivatedRoute, private router : Router) { }

  ngOnInit(): void {
  }

  hpclicked(){

    const veriff = Veriff({
      apiKey: 'API_KEY',
      parentId: 'veriff-root',
      onSession: function(err : Error, response : Response) {
        console.log("executed");
      }
    });
    veriff.setParams({
      person: {
        givenName: 'Foo',
        lastName: 'Bar'
      },
      vendorData: '7eb19312-79d6-11ec-90d6-0242ac120003'
    });
    veriff.mount({
      submitBtnText: 'Get verified'
    });
   
   }
}

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