Module import error on Next 14.1.3

[laurapadilla]

react-google-recaptcha version: 2.1.9
node version: 18.18.2
next: 14.1.3
typescript: 4.9.5
macOS: Sonoma 14.4

I'm getting an Unable to resolve path to module 'react-google-recaptcha' error and I'm not exactly sure how to fix this. I have tried everything I can think of and I still get this error:

I'm also using Typescript, so I tried npm i @types/react-google-recaptcha, restarted the TS server, reloaded my IDE, and it still didn't solve the issue.

Any help would be appreciated!

[Miguelii]

U can do a workaround for typescript. Create the file react-google-recaptcha.d.ts and inside put:

declare module 'react-google-recaptcha';

[frans-de-waal]

You could also manually declare the types for the component props:

declare module 'react-google-recaptcha' {
  export type ReCAPTCHAProps = {
    sitekey: string;
    onChange: (value: string) => void;
    onExpired: () => void;
    onErrored: () => void;
    size?: 'compact' | 'normal' | 'invisible';
    badge?: 'bottomright' | 'bottomleft' | 'inline';
    tabindex?: number;
    type?: 'image' | 'audio';
    theme?: 'light' | 'dark';
  } & React.ComponentPropsWithRef<'div'>;

  const ReCAPTCHA: React.FC<ReCAPTCHAProps>;

  export default ReCAPTCHA;
}