Typescript error: Unable to instantiate __WEBPACK_IMPORTED_MODULE_1_signature_pad__ as a constructor

Currently, I am working on a project using Angular2 and attempting to incorporate a JS library for signature input from https://github.com/szimek/signature_pad.

In my code, I have tried utilizing the library in the following way:

// .ts file
import * as SignaturePad from 'signature_pad';

export class ... {
    private signaturePad: SignaturePad;

    ngOnInit() {
        let canvas = document.querySelector("canvas");
        this.signaturePad = new SignaturePad(canvas);
    }
}

.

// .html file
<div...>
    <canvas></canvas>
</div>

However, when I launch the browser page, I encounter an error message: ERROR Error: Uncaught (in promise): TypeError: WEBPACK_IMPORTED_MODULE_1_signature_pad is not a constructor

I also attempted to use dimpu's angular2-signature-pad, but encountered the same error.

Answer №1

If you have installed the type definitions for signature_pad using the command

npm install --save-dev @types/signature_pad
, you can import and utilize it in the following manner. The reason being that signature_pad does not export any members, but rather declares the class SignaturePad within the current scope:

import 'signature_pad';

// ...
let canvas = document.querySelector("canvas");
this.signaturePad = new SignaturePad(canvas);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using Angular with mdbootstrap, the mdb-tabs directive will move to the end if the ngIf condition is true

Currently facing a challenge with a significant amount of code here. It is referenced as follows: "ng-uikit-pro-standard": "file:ng-uikit-pro-standard-8.3.0.tgz", I am attempting to display a tab between 1 and 3 if a certain condition ...

Adjusting a parameter according to the width of the browser window?

Using Masonry, I have implemented code that adjusts the columnWidth to 320 when the screen or browser window width is less than 1035px. When the width exceeds 1035px, the columnWidth should be 240. However, the current code keeps the columnWidth at 320 re ...

Enhance your React Native experience with IntelliSense recommending react-native/types over react-native

I am trying to bring in <View from react-native, but instead, I am getting react-native/types https://i.sstatic.net/FeRKT.png How can I resolve this issue? This is a new project starting from scratch and I followed the documentation by adding TypeScri ...

Optimizing Your Approach for Rolling Out Test and Development Application Versions on Google Compute Platform

Google Computing Platform I currently have an Angular (2) application and a Node.js middleware (Loopback) running as Services in an App Engine within my project. We are using a Compute Engine to run PostgreSQL for our database in the same project. Our Go ...

Sideways scrolling carousel/slider

Currently, I am in the midst of a project page where my aim is to incorporate a horizontal scrolling project/image slider. Strangely enough, all my attempts thus far have failed to produce the desired outcome. This is the layout: the projects must transit ...

Instructions for creating a dynamic Google map based on an address

Specifics I am aiming to generate a map based on any address stored within my <span> The address in question is : 410 walker street Lowell MA 01851 The <span> containing the address reads as follows: Address: <span id="address" > 410 w ...

Executing the callback function passed as a prop

I'm a bit confused about how to call a callback function in an element's prop. Let's say I have a button here: <Button onPress={() => { loadMore()}} title="Load More" backgroundColor='#0A55C4' /> I am wondering wh ...

Navigating through nested routes in Angular 5

I recently started learning about Angular, and I could really use some guidance on routing. Here is my current setup. app.component.html <router-outlet name="nav"></router-outlet> <router-outlet name="left-sidebar"></router-outlet> ...

What is the best way to access all of the "a" elements contained within this specific div?

Chrome websites are built using the following structure: <div class="divClass"> <a class="aClass"></a> <a class="aClass"></a> <a class="aClass"></a> </div> Utili ...

What is the method for accessing a map that has been set in a separate component?

My current setup involves utilizing a Leaflet map with vue2leaflet. The process I follow is quite standard: I import a list of places from a REST Api in the app store (vuex) Following that, during map initialization, the markers are created using the in ...

Instructions for transferring a JavaScript array to a Java servlet

Greetings everyone! I am currently working on a web application with an orthodox approach, utilizing AJAX in Java and JavaScript. I am wondering if it is feasible to pass an array from JavaScript to a Servlet. ...

"An error has occurred stating that the function Factory.function() in AngularJS

I'm a beginner with AngularJS and could use some assistance! My issue involves retrieving JSON data from a URL in a factory function and returning it to the controller. However, I keep getting an error stating that the function doesn't exist. Wh ...

How to apply props conditionally in VueJS?

I have a component called blogPost (Component A) that is imported in another component named B. When a button in Component B is clicked, Component A opens in a modal. There are two different use cases for this scenario. 1. One case requires passing 2 prop ...

The response data from Axios remains undefined even after a successful request

function verifyPassword() { let pass = document.getElementById("password").value let emailAddr = document.getElementById("email").value Service.confirmLoginPassword(emailAddr, pass).then(response => { result = re ...

Obtain a result value from MySQL in Node.js

I need help retrieving a value from a select SQL query in Node.js. When I try to return the value, it comes back as undefined. I understand that it's an asynchronous function, but I'm struggling with how to handle it. I even tried assigning it to ...

Vue table displaying a list of books with a button that allows users to easily send the title of the

Hey everyone, I am new to Vue and struggling with a certain task. I have two tables: Books and Booking. Books: ID, NAME, AUTHOR etc. Booking: ID, ID_USER, ID_BOOK I'm creating a page in Vue that displays all bookings, but the table only shows the BOO ...

Tips for animating AngularStrap Collapse

My AngularStrap navbar collapse is functioning well, but the collapsing process lacks animation. Despite injecting the ngAnimate library and including the data-animation='am-collapse' attribute in my bs-collapse directive, I seem to have missed s ...

Display one of two divs after clicking a button depending on the input from a form field

My apologies for my limited knowledge in JavaScript and jQuery. I'm attempting to show one of two divs based on input from a form. Specifically, there's a button next to a form field that asks users to enter their zip code to check if they are wi ...

Exploring ways to utilize functions and operators with the output of custom VueJS filters?

I have implemented a Vue filter called timeconverter to alter the date format of a string. My goal is to verify if the outcome of {{ time | timeconverter }} is before the present time. Is there a way to utilize JavaScript functions on the output generated ...

The click event listener only seems to fire on the second attempt

This block of code is designed to function as a search algorithm that also provides keyword suggestions. When a user clicks on a keyword, it is supposed to be placed into an input textbox. The possible keywords are "first" and "second". However, there is ...