Create a typescript definition file for a 3rd party node module (react-signature-canvas)

Question

I'll use React-Signature-Canvas as the example.

the react-signature-canvas node module install looks like this in my project dir:

react-signature-canvas
    build
         index.js
    src
        bezier.js
        index.js
        point.js
    LICENSE
    package.json
    README.md

The index.js file looks has the following signature:

export default class SignatureCanvas extends Component {

This looks pretty straight forward. I figured I would just create an index.d.ts in the module's root dir, and get it working, then figure out a better place to store it in my project later (i.e., outside of node_modules, with is in gitignore).

But I can't seem to get it to work. My typings file looks like this:'

declare module 'react-signature-canvas'
{
    interface ISignatureCanvasProps
    {
        velocityFilterWeight?: number;
        minWidth?: number;
        maxWidth?: number;
        dotSize?: number;
        penColor?: string;
        backgroundColor?: string;
        onEnd?: () => void;
        onBegin?: () => void;
        canvasProps?: any;
    }

    class SignatureCanvas extends React.Component<ISignatureCanvasProps, any>
    {
    }

    export = SignatureCanvas;
}

I am I am trying to use the Signature Pad like this:

import * as React from 'react';
import SignatureCanvas = require('react-signature-canvas');

export class DeliverySignature extends React.Component<any, undefined>
{
    public render(): JSX.Element
    {
        return (
            <div>
                <h4>Signature</h4>
                <SignatureCanvas
                    canvasProps={{width: 500, height: 200}} />
            </div>
        );
    }
}

Everything compiles fine, and Webpack seems happy. But when I go to load the page, I get

Uncaught (in promise) TypeError: Cannot read property 'replaceChild' of null at Function.replaceChildWithTree (DOMLazyTree.js:69) at Object.dangerouslyReplaceNodeWithMarkup (Danger.js:41) at Object.dangerouslyReplaceNodeWithMarkup [as replaceNodeWithMarkup] (DOMChildrenOperations.js:124) at ReactCompositeComponentWrapper._replaceNodeWithMarkup (ReactCompositeComponent.js:784) at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:774) at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:724) at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:645) at ReactCompositeComponentWrapper.performUpdateIfNecessary (ReactCompositeComponent.js:561) at Object.performUpdateIfNecessary (ReactReconciler.js:157) at runBatchedUpdates (ReactUpdates.js:150)

What am I missing here? I am assuming I have imported incorrectly.

Thanks.

Alon · Accepted Answer · 2017-05-29 09:37:35Z

2

TypeScript has nothing to do with your error. The declaration file purpose is to help the compiler help you, but your code can run without them.

Nevertheless, your declaration file is incorrect. It's not supposed to contain any implementation. {} is also a kind of implementation. Consider this question in order to fix that. But again, this is not the source of your error.

Also, the naming convention is filename.d.ts, not .dt.ts

It seems like you are importing correctly. You can change it to:

import * as SignatureCanvas from 'react-signature-canvas';

But it's the same thing, except for the later one is ES6-compliant.

edited May 29, 2017 at 9:37

answered May 29, 2017 at 9:31

Alon

12.2k28 gold badges106 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Alon Over a year ago

I've answered your question. I recommend you to accept it and open a new question, more focused on the problem rather than the declaration file, and with the JavaScript tag, rather than TypeScript.

sheamus Over a year ago

The index.dt.ts was a typo. I do have index.d.ts. It seems the thing I was missing the namespace hack in my declaration, as adding that fix my TS compile errors. However the project still doesn't run, it complains about the render method which uses the <SignatureCanvas />. "Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object."

sheamus Over a year ago

If I inspect SignatureCanvas, it does not show a constructor function like I would have expected, it shows an Object with a 'default' property. So it seems it is not being imported correctly.

Alon Over a year ago

TypeScript doesn't have anything to do with your importing. It's just ES6. You should open another question for that, omit the declaration file stuff, and include the JavaScript tag instead of TypeScript. Then, your question will be short and to the point. and you'll reach the right experts for this kind of problem. (You cannot change this question BTW because then you'd disproved existing answers, which is against SO rules).

sheamus Over a year ago

Are you sure that this isn't a problem with how typescript imports? See github.com/Microsoft/TypeScript/issues/11340 . If I am going to open a new question, it is likely important that we know that this is only a JS problem. But it seems unlikely, as other people are using that Node module with pure JS.

|

Jan Turoň · Accepted Answer · 2020-01-16 20:34:49Z

1

As you can see in this pull request, types for react-signature-canvas were added to DefinitelyTyped library.

You can add it to your project by executing following commands:

yarn add @types/react-signature-canvas

OR (using NPM)

npm i @types/react-signature-canvas.

answered Jan 16, 2020 at 20:34

Jan Turoň

4865 silver badges10 bronze badges

1 Comment

agilgur5 May 7 at 0:59

Types are also built-in as of react-signature-canvas v1.1.0-alpha.1, so newer versions no longer require @types/react-signature-canvas for TypeScript support.

Collectives™ on Stack Overflow

Create a typescript definition file for a 3rd party node module (react-signature-canvas)

2 Answers 2

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related