Cannot Import in TypeScript #335

jamie-thul · 2018-02-05T18:51:38Z

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.

The text was updated successfully, but these errors were encountered:

szimek · 2018-02-05T20:11:54Z

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.

strongui · 2018-02-06T16:13:00Z

@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.

szimek · 2018-02-06T16:18:17Z

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.

strongui · 2018-02-06T16:28:43Z

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

szimek · 2018-02-06T17:18:33Z

But this library does not provide TypeScript declaration files.

strongui · 2018-02-06T17:26:10Z

@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??

szimek · 2018-02-06T17:54:26Z

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

strongui · 2018-02-06T18:00:27Z

@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

MrJoe · 2018-02-09T11:03:11Z

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

Selman-EE · 2018-02-13T14:31:40Z

@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' }

szimek · 2018-02-18T14:32:24Z

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.

Selman-EE · 2018-02-23T11:43:29Z

@szimek thanks it works for me

pablomaurer · 2018-02-26T15:53:19Z

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
  }
}

onurkose · 2018-03-02T06:56:46Z

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

szimek · 2018-03-13T17:52:43Z

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.

StevenBarnettST · 2018-04-11T23:04:14Z

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.

szimek · 2018-04-12T18:29:37Z

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

Ross-Rawlins · 2019-02-19T08:27:13Z

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

Flinsch · 2019-03-24T10:18:23Z

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)

sharabiania · 2019-09-30T21:56:40Z

I did a workaround to get it to work:
var SignaturePad = require('signature_pad/dist/signature_pad.js');

StephanBijzitter · 2021-06-27T19:28:20Z

esModuleInterop: true is what triggers this issue; without it: the library imports correctly.

For example, this is how I have to import it: const {default: SignaturePad} = require('signature_pad');

RishabSwift · 2021-07-20T18:57:27Z

This is how I fixed it (in Webpack/Mix)

let SignaturePad = require('signature_pad');
window.SignaturePad = SignaturePad.default;

nushankodikara · 2021-08-25T13:39:16Z

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.

danielausparis · 2022-05-09T07:06:50Z

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.

minimul · 2023-06-16T21:56:28Z

With importmaps setup e.g.
pin 'signature_pad', to: 'https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js'

I'm just doing import 'signature_pad' but also because none of the more orthodox import declarations worked.

szimek added the needs: more info label Feb 18, 2018

UziTech closed this as completed Jun 18, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot Import in TypeScript #335

Cannot Import in TypeScript #335

jamie-thul commented Feb 5, 2018

szimek commented Feb 5, 2018

strongui commented Feb 6, 2018

szimek commented Feb 6, 2018

strongui commented Feb 6, 2018

szimek commented Feb 6, 2018

strongui commented Feb 6, 2018 •

edited

szimek commented Feb 6, 2018

strongui commented Feb 6, 2018

MrJoe commented Feb 9, 2018

Selman-EE commented Feb 13, 2018 •

edited

szimek commented Feb 18, 2018 •

edited

Selman-EE commented Feb 23, 2018 •

edited

pablomaurer commented Feb 26, 2018 •

edited

onurkose commented Mar 2, 2018

szimek commented Mar 13, 2018

StevenBarnettST commented Apr 11, 2018

szimek commented Apr 12, 2018

Ross-Rawlins commented Feb 19, 2019

Flinsch commented Mar 24, 2019

sharabiania commented Sep 30, 2019

StephanBijzitter commented Jun 27, 2021 •

edited

RishabSwift commented Jul 20, 2021

nushankodikara commented Aug 25, 2021 •

edited

danielausparis commented May 9, 2022

minimul commented Jun 16, 2023

Cannot Import in TypeScript #335

Cannot Import in TypeScript #335

Comments

jamie-thul commented Feb 5, 2018

szimek commented Feb 5, 2018

strongui commented Feb 6, 2018

szimek commented Feb 6, 2018

strongui commented Feb 6, 2018

szimek commented Feb 6, 2018

strongui commented Feb 6, 2018 • edited

szimek commented Feb 6, 2018

strongui commented Feb 6, 2018

MrJoe commented Feb 9, 2018

Selman-EE commented Feb 13, 2018 • edited

szimek commented Feb 18, 2018 • edited

Selman-EE commented Feb 23, 2018 • edited

pablomaurer commented Feb 26, 2018 • edited

onurkose commented Mar 2, 2018

szimek commented Mar 13, 2018

StevenBarnettST commented Apr 11, 2018

szimek commented Apr 12, 2018

Ross-Rawlins commented Feb 19, 2019

Flinsch commented Mar 24, 2019

sharabiania commented Sep 30, 2019

StephanBijzitter commented Jun 27, 2021 • edited

RishabSwift commented Jul 20, 2021

nushankodikara commented Aug 25, 2021 • edited

danielausparis commented May 9, 2022

minimul commented Jun 16, 2023

strongui commented Feb 6, 2018 •

edited

Selman-EE commented Feb 13, 2018 •

edited

szimek commented Feb 18, 2018 •

edited

Selman-EE commented Feb 23, 2018 •

edited

pablomaurer commented Feb 26, 2018 •

edited

StephanBijzitter commented Jun 27, 2021 •

edited

nushankodikara commented Aug 25, 2021 •

edited