react-country-flag: Declaration File missing

What I have done : npm install --save react-country-flag

react-country-flag folder appears well in my node-modules.

Then : import ReactCountryFlag from "react-country-flag"; from a .ts file

Gets me this error :

Could not find a declaration file for module 'react-country-flag'. '/home/{...}/node_modules/react-country-flag/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/react-country-flag` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-country-flag';`  TS7016

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 8
  • Comments: 23 (9 by maintainers)

Commits related to this issue

Most upvoted comments

Any update on this?

@r3wt @thibaultboursier I may prefer the manual / static file this code base won’t change much as it’s a pretty dead simple library will update you all ASAP when I make the change

Hello @danalloway @FabianoLothor @r3wt,

I opened a PR to add TypeScript and generate declaration files each time project is built. You can check it here.

just released version v3.0.1 with Typescript support

working on a Typescript version of this library, should publish today

@danalloway I fix it in my project with this workaround:

// New file /src/external.d.ts
declare module "react-country-flag";

tnx!!

Here are some declarations i wrote for v2. It’s not perfect, but it seems to work for me. Maybe someone who is better at TS can come along and make it perfect.

declare module 'react-country-flag' {
  import * as React from 'react';
  export interface ReactCountryFlagProps<T> extends React.DetailedHTMLProps<React.LabelHTMLAttributes<T>,T> {
    cdnSuffix?:string;
    cdnUrl?:string;
    countryCode: string;
    svg?: boolean;
    style?: React.CSSProperties;
  }
  const ReactCountryFlag:React.FC<ReactCountryFlagProps<HTMLSpanElement|HTMLImageElement>> = ({
    cdnSuffix='svg',
    cdnUrl='https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/4x3/',
    svg=false,
    style={},
    countryCode
  })=>React.ReactNode;// return should be HTMLImageElement or HTMLSpanElement but close enough for me.
  export default ReactCountryFlag;
};

@danalloway I fix it in my project with this workaround:

// New file /src/external.d.ts
declare module "react-country-flag";

@thibaultboursier just checking in on this, if you’re still going to do it i’ll leave this issue open, otherwise please close it out for me, thank you

Ok, i’ll doit that soon.

v2 is out, ready for that declaration file if you’re still up for it

declare module 'react-country-flag' {
  import * as React from 'react';
  export interface ReactCountryFlagProps {
    code: string;
  }
  export default class ReactCountryFlag extends React.Component<ReactCountryFlagProps, any> {}
}
`
``