0
votes

Whenever I run my tests they throw me an error that SignaturePad (a npm library) apparently does not have a constructor...

  ● SignaturePadComponent › should create

    TypeError: signature_pad_1.default is not a constructor

      31 |   ngAfterViewInit() {
      32 |     if (this.canvasEl.nativeElement) {
    > 33 |       this.signaturePad = new SignaturePad(this.canvasEl.nativeElement);
         |                           ^
      34 |     }
      35 |   }
      36 |

but if I look into the module it actually has a constructor and is defined as a class:

export default class SignaturePad extends SignatureEventTarget {
  .
  .
  .
  constructor(canvas: HTMLCanvasElement, options?: Options);
  clear(): void;
  toDataURL(type?: string, encoderOptions?: number): string;
  .
  .
  .
 }

The code I'm using right now is this one:

import SignaturePad from 'signature_pad';

export class SignaturePadComponent implements AfterViewInit {
  signaturePad: SignaturePad;
  @ViewChild('canvas') canvasEl: ElementRef;


  ngAfterViewInit() {
    if (this.canvasEl.nativeElement) {
      this.signaturePad = new SignaturePad(this.canvasEl.nativeElement);
    }
  }

The tests always fail at ngAfterViewInit since this.signaturePad = new SignaturePad is not a constructor???!

A colleague suggested to write it like this (using SignaturePad.default)

    import * as SignaturePad from 'signature_pad';
export class SignaturePadComponent implements AfterViewInit {
  signaturePad: SignaturePad.default;
  @ViewChild('canvas') canvasEl: ElementRef;

  ngAfterViewInit() {
    if (this.canvasEl.nativeElement) {
      this.signaturePad = new SignaturePad.default(this.canvasEl.nativeElement);
    }
  }

but that does not work as well. It seems to be some kind of an import problem... I also tried

import { SignaturePad } from 'signature_pad/dist/signature_pad';

and

import SignaturePad from 'signature_pad/dist/signature_pad';

but nothing works... What am I supposed to do know? I'm working with Angular if that matters at all.

constructor is accepting HTMLCanvasElement and you are providing nativeElement. Check if it accepts that - Kshitij