Skip to content

Issue with Types #267

Open
Open
@foufrix

Description

@foufrix

Hi, I have everything working well, but as soon as I try to build i got this issue :

Type error: 'Reaptcha' cannot be used as a JSX component.
  Its instance type 'Reaptcha' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'string | number | boolean | ReactFragment | Element | null | undefined' is not assignable to type 'ReactNode'.
        Type 'ReactFragment' is not assignable to type 'ReactNode'.
          Type 'Iterable<React.ReactNode>' is not assignable to type 'Iterable<import("/Users/raf/Documents/PiNGS/discord-oauth/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode>'.
            Type 'React.ReactNode' is not assignable to type 'import("/Users/raf/Documents/PiNGS/discord-oauth/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.
              Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
                Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.

  38 |       <form>
  39 |         {isLoading && <Loader color="black" />}
> 40 |         <Reaptcha
     |          ^
  41 |           sitekey={RECAPTCHA_KEY}
  42 |           onVerify={(token) => onVerify(token)}
  43 |           onRender={() => setIsloading(false)}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I'm using NextJS.

I think the problem come from the definition of types here :

declare class Reaptcha extends Component<Props, State> {
    container?: HTMLDivElement | null;
    timer?: number | undefined;
    state: State;
    static defaultProps: Partial<Props>;
    static getDerivedStateFromProps(props: Props, state: State): {
        invisible: boolean;
    } | null;
    _isAvailable: () => boolean;
    _inject: () => void;
    _prepare: () => void;
    _renderRecaptcha: (container: HTMLDivElement, config: RecaptchaConfig) => number;
    _resetRecaptcha: () => void;
    _executeRecaptcha: () => void;
    _getResponseRecaptcha: () => string;
    _onVerify: (response: string) => void;
    _onExpire: () => void | undefined;
    _onError: () => void | undefined;
    _stopTimer: () => void;
    componentDidMount: () => void;
    componentDidUpdate(prevProps: Readonly<Props>): void;
    componentWillUnmount: () => void;
    renderExplicitly: () => Promise<void>;
    reset: () => Promise<void>;
    execute: () => Promise<void>;
    getResponse: () => Promise<string>;
    render: () => string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
}

changing it to

render: () => PromiseLikeOfReactNode

Allowed me to build with no issue

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions