Troubleshooting Typescript definition file for React Component

Question

I'm currently using React 16.4.1 and Typescript 2.9.2. I'm trying to utilise the reaptcha library:

Which I import like this:

import * as Reaptcha from 'reaptcha';

As there are no type definitions shipped, building currently gives me this (expected) error:

TS7016: Could not find a declaration file for module 'reaptcha'. '...' implicitly has an 'any' type.

Despite this error, the code "works", but I've been trying for a long time to build just enough of a definition file to suppress the error. There seems to be a lot of different ways to do this based on how the library is export and I don't seem to have hit the right combination. For this definition:

declare module "reaptcha" {
  import * as React from "react";
  export default class Reaptcha extends React.Component<any, any> {
  }
}

Rather than solving the issue, this just presents a different error.

TS2604: JSX element type 'Reaptcha' does not have any construct or call signatures.

And this latter error, I'm quite stuck on. Any assistance getting past this appreciated.

The minimal case of where the component is used is:

  public render() {
    const Fragment = React.Fragment;
    return (
      <Fragment>
        <Reaptcha
          ref={(e: any) => (this.captcha = e)}
          sitekey="MY KEY"
          onVerify={this.onVerify}
        />
      </Fragment>
    );
  }

To understand why what you tried didn't work, I'd need to see the code that actually uses Reaptcha after importing it. — Matt McCutchen
– Matt McCutchen, Commented Jul 30, 2018 at 12:00

Matt McCutchen · Accepted Answer · 2018-07-30 22:22:56Z

1

The Reaptcha readme shows the import as:

import Reaptcha from 'reaptcha';

I tried this style of import with your original declaration and TypeScript was happy but the import didn't work at runtime. When I enabled the --esModuleInterop TypeScript option, then everything worked. Try using this option if you aren't already.

answered Jul 30, 2018 at 22:22

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

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

1 Comment

technion Over a year ago

Moving to the import * as... seems to be the widely documented approach, such as in every React doc. Your alternate approach here totally fixes it, thanks a heap for the help.

Matt McCutchen · Accepted Answer · 2018-07-30 11:59:55Z

1

You could just use:

declare module "reaptcha";

answered Jul 30, 2018 at 11:59

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

1 Comment

technion Over a year ago

Thanks Matt. I'd really like to work in a direction for a more complete definition - I wrote types for all the props and functions but pulled them back to demonstrate this minimal case. I'll accept this is we don't get there though.

Collectives™ on Stack Overflow

Troubleshooting Typescript definition file for React Component

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related