Definitelytyped: signature_pad/index.d.ts is not a module

[lukescott]

• [x] I tried using the @types/signature_pad package and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [x] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @AbubakerB @jrmihalick
  
  

When I try to import SignaturePad I get is not a module:

import * as SignaturePad from "signature_pad" // ... is not a module

[jrmihalick]

Try importing this way in your .ts file

import 'signature_pad';

then also make sure you have done the following:

1. Added signature pad in your dependencies of package.json:

{
...
  "dependencies": {
...
    "@types/signature_pad": "0.0.30",
    "signature_pad": "2.3.0",
...
  }
}

1. Added the signature_pad.js file in the scripts section of your .angular-cli.json

      "scripts": [
        "../node_modules/signature_pad/dist/signature_pad.js"
      ]

(Your path to signature_pad.js may be slightly different)

[lukescott]

I don't use Angular, I use React. I found similar issues on DefinetlyTyped, and they added something similar to this, which seems to have solved my problem:

export = SignaturePad;
export as namespace SignaturePad;

(I added this to the bottom of the index.d.ts file)

Not sure if this is the correct solution, but it seems to be working so far. I can PR it if you want.

[jrmihalick]

Let me test that addition on angular, then I will get back to you.

[aluanhaddad]

The declaration is wrong. As noted in the opening post, it is indeed missing

export = SignaturePad;
export as namespace SignaturePad;

It is a exported UMD module and the types should reflect that.
https://github.com/szimek/signature_pad/blob/master/rollup.configs.js#L40
It isn't related to angular.

If you are using Modules, then both of

import 'signature_pad';

and

import * as SignaturePad from "signature_pad";

are wrong.

Instead you should write

import SignaturePad = require("signature_pad");

or

import SignaturePad from "signature_pad";

This does not depend on Angular, React, or any other framework.

[SteffenLanger]

The solution for me was import SignaturePad from 'signature_pad/src/signature_pad';.

I use TypeScript 2.7.2.

[aluanhaddad]

@SteffenLanger that presumably works because you have set --allowJs. While that is useful and the import form you are using is ideal, the declaration should still be fixed.