Signature_pad: Cannot Import in TypeScript

Created on 5 Feb 2018 · 20Comments · Source: szimek/signature_pad

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.

more info

Source

jamie-thul

👍2

Most helpful comment

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 13 Mar 2018

👍7

All 20 comments

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 5 Feb 2018

👍3

@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 6 Feb 2018

👍1

What exactly is in SignaturePad variable in this case? Code in signature_pad/dist/signature_pad.mjs is simply bundled together ES6 source code with a default export. It should just work, unless TS doesn't handle default exports.

szimek on 6 Feb 2018

@szimek TS handles default exports just fine, the problem is in the @types/signature_pad index.d.ts definitions.

strongui on 6 Feb 2018

But this library does not provide TypeScript declaration files.

szimek on 6 Feb 2018

@szimek it doesn't? Then what is installed when you do install @types/signature_pad --save-dev, there is definitely TS declaration files. Are those not made the same people??

strongui on 6 Feb 2018

I don't know ;) You can see all files being published e.g. here: https://www.jsdelivr.com/package/npm/signature_pad.

szimek on 6 Feb 2018

@szimek I just noticed my comment before didn't show the whole install line, because of the @ character. I've edited it. Basically if you do install @types/signature_pad --save-dev, you will see the definitions installed in the @types/signature_pad folder. I wonder who's doing that? Maybe we need to contact them and fix it and merge it into the default package lol

strongui on 6 Feb 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 9 Feb 2018

👎2

@strongui I got the same mistake as you. I tried everything in the comments,
I also tried your comments @szimek . Absolutely not worked.
I using the signature pad in the JS file at now but I have to change place to TS
I using node version v6.11.2 and Typescript version is v2.6.2
npm version { npm: '3.10.10', ares: '1.10.1-DEV', node: '6.11.2', zlib: '1.2.11' }

Selman-EE on 13 Feb 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 18 Feb 2018

🎉1 👍1

@szimek thanks it works for me

Selman-EE on 23 Feb 2018

Works for me using TypeScript 2.4.2 and importing it like @szimek in the comment above.

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

pablomaurer on 26 Feb 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 2 Mar 2018

👍3

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 13 Mar 2018

👍7

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 12 Apr 2018

❤1

@StevenBarnettST Fixed! Thanks for reporting these issues. Tomorrow I'll release a new beta version.

szimek on 12 Apr 2018

What is the correct way to bind the TYPE/interface of signaturepad to a variable, for autocomplete and ts checking?

Ross-Rawlins on 19 Feb 2019

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)' });

This works for me. Thanks a lot! (Symfony Webpack Encore)