signature_pad: Cannot Import in TypeScript

According to the description, I should be able to import this module into TypeScript as follows: import * as SignaturePad from 'signature_pad';

TypeScript refuses to recognize this as valid because there isn’t an exported module. Please export a module for TypeScript compatibility.

Here is a stack overflow topic regarding this.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 25 (7 by maintainers)

Most upvoted comments

I just released a beta version that is rewritten in TypeScript. Declaration files are now provided by the library. You can install it using yarn add signature_pad@beta. The source code is still available only on typescript branch.

It still uses the default export, but I tested it with Webpack 4 and TypeScript 2.7.2 and it works if I import it using import SignaturePad from 'signature_pad'.

It would be awesome to get some feedback, if it works, if there are any issues etc.

szimek on Mar 13, 2018

For those are getting SignaturePad is not a constructor error under the hood of requirejs and webpack (or laravel mix) just use with default, as: new SignaturePad.default(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

onurkose on Mar 2, 2018

I’ve just tried it out using TypeScript 2.7.2 and it works fine.

index.ts

import SignaturePad from 'signature_pad';

new SignaturePad(document.querySelector('canvas'));

index.html

<html>
  <body>  
    <canvas style="border: 2px solid #000"></canvas>
    <script src="bundle.js"></script>
  </body>
</html>

tsconfig.json

{
  "compilerOptions": {
    "outDir": ".",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es3"
  }
}

webpack.config.js

module.exports = {
  entry: './index.js',  
  output: { filename: 'bundle.js' },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.js' ]
  }
};

Run yarn add signature_pad typescript webpack ts-loader && yarn run webpack. Then open index.html and it should work.

szimek on Feb 18, 2018

If it doesn’t work, you can try to import directly from signature_pad/dist/signature_pad.mjs.

The next version will most likely be rewritten in TypeScript - see typescript branch. I “just” need to find some free time to clean it up and figure out rollup config for all versions (umd es5, es6, non-minified, minified etc.) and how to generate TS declaration files.

szimek on Feb 5, 2018

Looks like you’re using a definition file from DefinitelyTyped .

If I read the declaration correctly this might work (sorry didn’t try it out, I just stumbled upon this issue): import { SignaturePad } from 'signature_pad';

MrJoe on Feb 9, 2018

For posterity. Frankly, this module stuff is laughable. It requires in-depth study of the module framework, next you have to use huge frameworks such as npm or yarn, and lastly, after hours of precious time invested, it does’nt work (see above dialogs). This is ridiculous. Remember, this library is just 11k !! I thank dearly nushankodikara for his comment that allowed me to use the pre-module, pre-TS, pre-obfuscated version 1.3.5 and just write a simple <script src="jslibs/signature_pad.min.js"></script> and that’s it. Just works ! This module stuff is typically a case of project governance gone nuts. Trying to solve a non-existent problem with huge tools and abstraction layers so complex that nobody (see dialogs above) is anymore able to have even the slightest idea of what is going on.

danielausparis on May 9, 2022

Found a way to make it work but It’s not for everyone. I managed it to work using the most basic JS and HTML

import from CDN to HTML page ( Using version 1.3.5 )

<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.3.5/signature_pad.min.js" integrity="sha512-kw/nRM/BMR2XGArXnOoxKOO5VBHLdITAW00aG8qK4zBzcLVZ4nzg7/oYCaoiwc8U9zrnsO9UHqpyljJ8+iqYiQ==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script>

setup the canvas as usual

<canvas id="signature-pad" class="signature-pad" width="400" height="200" style=" width: 400px; height: 200px; border-radius: 1em; border-style: dashed; border-width: 1px; " ></canvas> <button type="button" id="clearsig" class="btn btn-danger"> Clear </button>

add the functional script to HTML Page

<script> let canvas = document.getElementById("signature-pad") let signaturePad = new SignaturePad(canvas, { backgroundColor: "rgb(250,250,250)", penColor: "rgb(0, 0, 0)", }); document.getElementById("clearsig").addEventListener("click", function () { signaturePad.clear() }); </script>

retrieve data from JS file

let data = signaturePad.toDataURL("image/png")

It will work, But it’s not for everyone.

Screenshot (19)

nushankodikara on Aug 25, 2021

We’re using the beta version in a TypeScript 2.8 app and it works fine.

Just minor issues:

Getting an unhandled error on touch end because const touch = event.targetTouches[0] is undefined.
The toDataURL method should have its arguments marked as optional if you want to match canvas’s toDataURL method.

StevenBarnettST on Apr 11, 2018

@szimek Can con firm that this still does not work inside a .tsx file.

import * as SignaturePad from 'signature_pad'; Gives SignaturePad is not a constructor

import * as SignaturePad from 'signature_pad/dist/signature_pad.mjs'; Gives SignaturePad is not a constructor

const SignaturePad = require('signature_pad'); Gives SignaturePad is not a constructor

import SignaturePad from 'signature_pad'; Works, but gives a typescript error in the console: …node_modules/@types/signature_pad/index.d.ts’ is not a module.

strongui on Feb 6, 2018