CODEWITHSUNDEEP
reactjstypescript
technion
technion

Reputation: 49

Troubleshooting Typescript definition file for React Component

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

https://github.com/sarneeh/reaptcha

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

Upvotes: 1

Views: 464

Answers (2)

Matt McCutchen
Matt McCutchen

Reputation: 30919

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.

Upvotes: 1

Matt McCutchen
Matt McCutchen

Reputation: 30919

You could just use:

declare module "reaptcha";

Upvotes: 1

Related Questions