Typescript: Could not find a declaration file for module 'react-cards'

Question

I am totally new to ReactJS and I found myself stuck in the next thing. I have installed react-cards via npm like this:

npm install --save react-cards

Installation was ok and I want to import it in my code like this:

import Card from 'react-cards';

But then I got error saying this:

Could not find a declaration file for module 'react-cards':'path' implicitly has an 'any' type. Try 'npm install @types/react-cards' if it exists or add a new declaration(.d.ts) file containing 'declare module 'react-cards';'.

I have tried with npm install @types/react-cards but nothing changed.

I don't know what to do.

how did you create your react project? very unusual to get a typescript error like that unless you're using typescript — azium, May 27 '18 at 19:47
I have created ASP.NET Core MVC app with React trough Visual Studio. — Ryukote, May 27 '18 at 20:07
**See Also**: [Could not find a declaration file for module 'module-name'](https://stackoverflow.com/q/41292559/1366033) — KyleMit, Nov 03 '20 at 04:44

score 26 · Accepted Answer · edited Feb 03 '20 at 09:04

26

You're importing an npm packages which lacks type information.

In your example, TypeScript doesn't understand the properties of Card when imported. TypeScript is not able to detect a type and refers to any, which essentially means untyped.

For many untyped packages there are @types npm packages which add those typings for you. You can find them here: microsoft.github.io/TypeSearch

Unfortunately, there's no @types/react-card package, but you have options:

You could write the typing information for react-cards by yourself and save it into a react-cards.d.ts file.
Disable the warning inside your tsconfig.json by setting "noImplicitAny": false - Reference : https://www.typescriptlang.org/docs/handbook/compiler-options.html

Further information: typescript github thread "Importing untyped JS modules"

edited Feb 03 '20 at 09:04

doublejosh

5,548
4
39
45

answered May 27 '18 at 19:58

jantimon

36,840
23
122
185

So basically if I understand you well, I have decided to work with a package that I can't work with. If I do step 2 I will then get an errors for next 2 lines: import React from 'react'; import ReactDom from 'react-dom'; Sorry, but I am having a strugle working with code tags :) – Ryukote May 27 '18 at 20:17
I guess that would be a new question :) – jantimon May 28 '18 at 12:00
The only thing left I could try is the first thing you have mentioned, but since I am React/Javascript/Typescript newb I really don't have a clue what to do with that. – Ryukote May 28 '18 at 12:02
Did you install @types/react and @types/react-dom ? – jantimon May 28 '18 at 12:05
I am in another movie now. I will check it out when I get home. – Ryukote May 28 '18 at 12:07
For option 1, where is the react-cards.d.ts file need to be placed? And are there any updates to tsconfig.json? – Kevin S Aug 13 '20 at 04:00

score 4 · Answer 2 · answered Nov 03 '20 at 04:43

4

If you're using VS Code, there's a quick fix suggestion for this you can invoke with Ctrl + .

You can also automatically add all missing types with typesync like this:

npx typesync

If the package doesn't have it's own types, and it hasn't been added to DefinitelyTyped, you'll need to add a new definitions file

Typescript: Could not find a declaration file for module 'react-cards'

2 Answers2

You're importing an npm packages which lacks type information.

Further Reading

Linked