CODEWITHSUNDEEP
typescriptmoduletypescript-typings
Michal
Michal

Reputation: 2073

Could not find a declaration file for module in TypeScript

I am using react-facebook-login library and TypeScript in my web app. I have also installed @types/react-facebook-login. When I import library like that, everything works fine:

import ReactFacebookLogin from 'react-facebook-login'

However, this library allow import component without any styles (that's what I want):

import ReactFacebookLogin from 'react-facebook-login/dist/facebook-login-render-props'

In this case error appears:

Could not find a declaration file for module 'react-facebook-login/dist/facebook-login-render-props'

My tsconfig.json is created with create-react-app app --template typescript:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

Is there any way to fix it?

Upvotes: 2

Views: 599

Answers (1)

Giregar
Giregar

Reputation: 192

Add the following code to react-app-env.d.ts.

declare module 'react-facebook-login/dist/facebook-login-render-props' {
  export interface RenderProps {
    onClick:
      | ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)
      | undefined;
    isDisabled: boolean;
    isProcessing: boolean;
    isSdkLoaded: boolean;
  }

  interface ReactFacebookLoginProps {
    appId: string;
    callback(userInfo: ReactFacebookLoginInfo): void;
    onFailure?(response: ReactFacebookFailureResponse): void;

    autoLoad?: boolean;
    buttonStyle?: React.CSSProperties;
    containerStyle?: React.CSSProperties;
    cookie?: boolean;
    cssClass?: string;
    disableMobileRedirect?: boolean;
    fields?: string;
    icon?: string | React.ReactNode;
    isDisabled?: boolean;
    language?: string;
    onClick?(event: React.MouseEvent<HTMLDivElement>): void;
    reAuthenticate?: boolean;
    redirectUri?: string;
    scope?: string;
    size?: 'small' | 'medium' | 'metro';
    textButton?: string;
    typeButton?: string;
    version?: string;
    xfbml?: boolean;
    isMobile?: boolean;
    tag?: Node | React.Component<any>;
    render(props: RenderProps): void;
  }

  interface ReactFacebookFailureResponse {
    status?: string;
  }

  interface ReactFacebookLoginInfo {
    id: string;
    accessToken: string;
    name?: string;
    email?: string;
  }

  interface ReactFacebookLoginState {
    isSdkLoaded?: boolean;
    isProcessing?: boolean;
  }

  export default class ReactFacebookLogin extends React.Component<
    ReactFacebookLoginProps,
    ReactFacebookLoginState
  > {}
}

Upvotes: 2

Related Questions