Typescript react - Could not find a declaration file for module ''react-materialize'. 'path/to/module-name.js' implicitly has an any type

Question

I am trying to import components from react-materialize as -

import {Navbar, NavItem} from 'react-materialize';

But when the webpack is compiling my .tsx it throws an error for the above as -

ERROR in ./src/common/navbar.tsx
(3,31): error TS7016: Could not find a declaration file for module 'react-materi
alize'. 'D:\Private\Works\Typescript\QuickReact\node_modules\react-materialize\l
ib\index.js' implicitly has an 'any' type.

Is there any resolution for this? I'm unsure how to resolve this import statement to work with ts-loader and webpack.

The index.js of react-materialize looks likes this. But how do I resolve this for the module import in my own files?

https://github.com/react-materialize/react-materialize/blob/master/src/index.js

You need to install the typings/types for the package (npm install @types/react-materialize). However, it looks like this doesn't exist yet, so you may need to create it yourself. I found this article helpful - https://templecoding.com/blog/2016/03/31/creating-typescript-typings-for-existing-react-components/ — T Mitchell, Jan 04 '17 at 12:14
@T Mitchell so does that mean any kind of types which we are missing we never would be able to compile webpack without this creating these types ? There should be some way ? — Joy, Jan 04 '17 at 12:17
There is a way - http://stackoverflow.com/questions/38224232/how-to-consume-npm-modules-from-typescript — T Mitchell, Jan 04 '17 at 12:22
Possible duplicate of [Could not find a declaration file for module 'module-name'. '/path/to/module-name.js' implicitly has an 'any' type](https://stackoverflow.com/questions/41292559/could-not-find-a-declaration-file-for-module-module-name-path-to-module-nam) — Michael Freidgeim, Oct 18 '19 at 01:53

Ogglas · Answer 1 · 2017-04-20T19:26:52.930

194

I had a similar error but for me it was react-router. Solved it by installing types for it.

npm install --save @types/react-router

Error:

(6,30): error TS7016: Could not find a declaration file for module 'react-router'. '\node_modules\react-router\index.js' implicitly has an 'any' type.

If you would like to disable it site wide you can instead edit tsconfig.json and set noImplicitAny to false.

edited Apr 20 '17 at 19:26

answered Apr 20 '17 at 14:40

Ogglas

62,132
37
328
418

4

Although there is currently no such @types/react-navigation-tabs package yet, still the mentioned `"noImplicitAny": false,` did disable it (I got this issue because of using react-native init MyProject --template typescript, I think so at least) – Top-Master Apr 18 '19 at 10:27
12

or `yarn add @types/react-router --dev` – Omar Tariq May 19 '20 at 23:25
11

````yarn add @types/react-router-dom```` Fixed it for me when using create-react-app – thenomadicmann Mar 19 '21 at 04:10
1

Best answer. Had the same issue with `react-slick` as my project is a TypeScript project. Fix `npm i --save-dev @types/react-slick` – user3428422 Oct 03 '21 at 18:35
I had a similar problem with `jest-axe`. Solved by installing `@types/jest-axe`. – David Baucum Jan 25 '22 at 15:39

score 143 · Accepted Answer · edited Jun 14 '21 at 05:54

143

For those who wanted to know that how did I overcome this . I did a hack kind of stuff .

Inside my project I created a folder called @types and added it to tsconfig.json for find all required types from it . So it looks somewhat like this -

"typeRoots": [
  "../node_modules/@types",
  "../@types"
]

And inside that I created a file called alltypes.d.ts . To find the unknown types from it . so for me these were the unknown types and I added it over there.

declare module 'react-materialize';
declare module 'react-router';
declare module 'flux';

So now the typescript didn't complain about the types not found anymore . :) win win situation now :)

edited Jun 14 '21 at 05:54

Mosh Feu

28,354
16
88
135

answered Jan 13 '17 at 09:48

Joy

6,438
8
44
75

4

I missed the part about it being in a separate file. Seems like putting those `declare` statements in a file named `index.d.ts` fixed it for me. I didn't have to touch typeRoots. – Scotty Waggoner Jan 19 '17 at 22:15
That works just fine but it causes issues when using `require ` for other stuff like images. Basically, it just doesn't allow you to use `require` for anything. – Dhruvdutt Jadhav Jun 02 '17 at 11:10
1

this solution no longer works with latest TS. `nvalid module name in augmentation. Module 'some-dumb-lib-with-no-types' resolves to an untyped module at '/path/to/module', which cannot be augmented.` – FlavorScape Dec 07 '17 at 18:56
2

Something also worth mentioning: depending on the location of your source, you may also need to add "../types" to your "includes" array – netpoetica Mar 13 '18 at 15:43
but when I run the app it is complaining with the same error message, how to resolve it? – Mostafa Jun 20 '18 at 02:03
If you would like to disable it site wide you can instead edit tsconfig.json and set noImplicitAny to false. – anandharshan Jun 25 '19 at 15:38
1

I have issues with `react-countdown-clock`, created `@types` folder and did all the above steps. still getting the same error. – Jyothu Nov 19 '19 at 11:12
This all worked for me except for the additional config added to the tsconfig.json. Rather than using the example in the answer, I had to set the @types location in the "paths" value rather than the "typeRoots" value, i.e. { "compilerOptions": { "target": "es5", "baseUrl": "./", "paths": { "*" : ["src/@t`ypes/*"] } } } – Dan Jan 08 '20 at 12:55
anyone has luck with the latest version of ts? – derek May 10 '23 at 04:03

score 91 · Answer 3 · edited Apr 18 '19 at 10:43

91

I've had a same problem with react-redux types. The simplest solution was add to tsconfig.json:

"noImplicitAny": false

Example:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "noImplicitAny": false,
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

edited Apr 18 '19 at 10:43

piet.t

11,718
21
43
52

answered Apr 02 '19 at 15:26

Jackkobec

5,889
34
34

this worked great in `IntelliJ` IDE, but the custom `typeRoots` method (which is the accepted answer) did even work in `VS Code` IDE – Top-Master Apr 20 '19 at 05:13
10

I think this is a hack, though this solved the problem but Is there any valid and permanent solution for this problem? – Pardeep Jain Nov 17 '19 at 19:13
I think this is the best solution to this problem, I don't think it's viable to npm i every package that throws the err – Gilbert R. Sep 09 '20 at 04:09
2

Work perfect on VSC with react using typescript – Dany Nov 02 '21 at 13:34
This is a very bad practice, as the `any` type just ignores Typescript linting. So what's the point? It's a step back toward normal javascript, instead of using Typescript. For me the following answer solved it, and is considered much better: https://stackoverflow.com/questions/41462729/typescript-react-could-not-find-a-declaration-file-for-module-react-material#answer-62194561 – A-S Nov 17 '21 at 01:44
1

Problem solving begins from a simplest answer to avoid blockers during development. Next step is to find more elegant and focussed solution – Jackkobec Nov 17 '21 at 22:39

Mateja Petrovic · Answer 4 · 2020-10-30T20:37:45.780

57

If there is no @types/<package> for the module you are using, you may easily circumvent the issue by adding a // @ts-ignore comment above i.e.

// @ts-ignore
import { Navbar, NavItem } from 'react-materialize';

Alternatively you may create the missing @types/<package> following:

declaration files publishing

DefinitelyTyped how can i contribute

edited Oct 30 '20 at 20:37

answered Jul 03 '19 at 20:53

Mateja Petrovic

3,799
4
25
40

1

This package doesn't have a `@types` available yet BTW. Created an issue on the repo... https://github.com/geelen/react-snapshot/issues/131 – doublejosh Feb 05 '20 at 22:50
In 2022: `Do not use "@ts-ignore" because it alters compilation errors` – maswerdna Jan 24 '22 at 09:41

sina · Answer 5 · 2021-06-16T16:02:59.853

57

Make sure to stop your react local server and start it again after doing the following:

1- Create .d.ts file manually, you just need to do the following:

2 - enter src folder

3 - create global.d.ts file

4 - declare modules in it like:

declare module 'module-name';

I answered it here before and it was nice

edited Jun 16 '21 at 16:02

answered Jan 08 '21 at 12:43

sina

2,103
1
19
26

1

Thanks! This works the best out of all the solutions mentioned here – Phil Mar 14 '21 at 06:02
2

Make sure to stop your react local server and start it again if it still doesn't work after doing the above. `npm start` – Richard Apr 12 '21 at 22:37
This helped alongside the response [here](https://stackoverflow.com/a/72770743/6793883) – Eunit May 01 '23 at 14:22

score 35 · Answer 6 · edited Jun 19 '20 at 02:47

35

In my case I had a problem with react, so I started doing:

npm install @types/react

and then to the

npm install @types/react-dom

This worked for me

edited Jun 19 '20 at 02:47

Dominik

6,078
8
37
61

answered Jun 04 '20 at 12:26

AlessandroASB

351
3
2

2

Even tough they were already installed, re-running those commands solved the problem for me. – heringer Oct 11 '20 at 20:56
Basically, it updates your existing packages when you re-run the commands. That was the reason the problem is solved. – Anant Lalchandani Oct 26 '20 at 18:11
`npm install @types/react` was enough in my case. Thx! – A-S Nov 17 '21 at 01:41

score 26 · Answer 7 · answered Jan 19 '21 at 19:34

26

Just install the necessary types for react and it should solve the error.

if you are using yarn:

yarn add @types/react @types/react-dom @types/react-router-dom -D

if you are using npm:

npm install @types/react @types/react-dom @types/react-router-dom --save-dev

answered Jan 19 '21 at 19:34

Muho

3,188
23
34

Thanks. This worked for me. Surprising that I had to do this as I had created the react app using the command npx create-react-app react-quiz --template typescript I thought this would be enough to take care of all dependencies – Arif Shaikh Nov 21 '21 at 10:05

score 8 · Answer 8 · answered Apr 09 '20 at 18:35

I had this same problem but not necessarily relating to typescript, so I struggled a bit with these different options. I am making a very basic create-react-app using a specific module react-portal-tooltip, getting similar error:

Could not find a declaration file for module 'react-portal-tooltip'. '/node_modules/react-portal-tooltip/lib/index.js' implicitly has an 'any' type. Try npm install @types/react-portal-tooltip if it exists or add a new declaration (.d.ts) file containing declare module 'react-portal-tooltip';ts(7016)

I tried many steps first - adding various .d.ts files, various npm installs.

But what eventually worked for me was touch src/declare_modules.d.ts then in src/declare_modules.d.ts:

declare module "react-portal-tooltip";

and in src/App.js:

import ToolTip from 'react-portal-tooltip';
// import './declare_modules.d.ts'

I struggled a bit with the different locations to use this general 'declare module' strategy (I am very much a beginner) so I think this will work with different options but I am included paths for what worked work me.

I initially thought import './declare_modules.d.ts' was necessary. Although now it seems like it isn't! But I am including the step in case it helps someone.

This is my first stackoverflow answer so I apologize for the scattered process here and hope it was still helpful! :)

This is really neat and simple. Thank you. Keep up the good work! — Cubelaster, Apr 17 '20 at 14:52

score 7 · Answer 9 · edited Jun 21 '19 at 07:39

7

All you need to do is run the below script. Then, remove/re-install the module that you want to use.

npm install --save @types/react-redux

edited Jun 21 '19 at 07:39

barbsan

3,418
11
21
28

answered Mar 08 '18 at 14:59

Tun

824
3
16
30

1

There doesn't appear to be a @types/react-materialize available – RonLugge Nov 01 '19 at 02:18

score 7 · Answer 10 · answered Jul 13 '21 at 14:18

7

Had the same error with react-router-dom.

This error occurs when you're working on a typescript project, default modules doesn't come with types that are needed with typescript.

So I searched on npmjs.com a package named @types/react-router-dom if it's not react-router-dom you're seeking for then replace the react-router-dom by your untyped module.

Seek for the last version on the npm website, then add this in your package.json like so :

[...]
"dependencies": {
    [...]
    "@types/react-router-dom": "^5.1.8",
    [...]
  },
[...]

Once it's done, run yarn install

Then it should rocks !

answered Jul 13 '21 at 14:18

Sornin

105
2
10

2

You can also add it in "devDependencies": `"devDependencies": { "@types/react-router-dom": "^5.1.8" }` – user1053510 Jul 29 '21 at 11:53
Note: Add types module to devDependencises – Mostav Aug 24 '21 at 11:07

score 6 · Answer 11 · answered Nov 01 '19 at 16:29

6

I had this issue when I added react-router-dom to the new CRA app using typescript. After I added @types/react-router, the issue was fixed.

answered Nov 01 '19 at 16:29

dkocich

221
4
7

What to do after installing this? – Pardeep Jain Nov 17 '19 at 19:15

score 5 · Answer 12 · answered Jan 06 '18 at 22:17

A more hacky way is to add eg., in boot.tsx the line

import './path/declare_modules.d.ts';

with

declare module 'react-materialize';
declare module 'react-router';
declare module 'flux';

in declare_modules.d.ts

It works but other solutions are better IMO.

score 5 · Answer 13 · answered Dec 21 '20 at 10:47

5

Could not find a declaration file for module 'react/jsx-runtime'

If someone's having this error, then you'll be surprised to know that when creating react app with create-react-app, it only shows @types/react in package.json. But if you check inside the node_modules/@types folder, you'll not find any folder of react.

Solution is to just wipe out the node_modules folder completely and reinstall - npm install or maybe can go with the individual module installation - npm install @types/react.

answered Dec 21 '20 at 10:47

Germa Vinsmoke

3,541
4
24
34

1

The most relevant answer that completely solves the problem, thanks! – Roman Karagodin Jul 27 '21 at 19:38
1

Cool! Tnx! `npm install -D @types/react` IMO would be better – tropikan4 Aug 14 '21 at 07:22
1

@tropikan4 yeah but who knows if in future just like `@types/react` some other module is also absent then we can go with `npm install` – Germa Vinsmoke Aug 14 '21 at 11:08

score 4 · Answer 14 · answered Dec 18 '17 at 09:13

Also, this error gets fixed if the package you're trying to use has it's own type file(s) and it's listed it in the package.json typings attribute

Like so:

{
  "name": "some-package",
  "version": "X.Y.Z",
  "description": "Yada yada yada",
  "main": "./index.js",

  "typings": "./index.d.ts",

  "repository": "https://github.com/yadayada.git",
  "author": "John Doe",
  "license": "MIT",
  "private": true
}

score 3 · Answer 15 · edited Oct 25 '18 at 08:43

What I did was run the following commands from nodejs command prompt while in the project folder directory:

npm init
npm install -g webpack
npm install --save react react-dom @types/react @types/react-dom
npm install --save-dev typescript awesome-typescript-loader source-map-loader
npm install ajv@^6.0.0
npm i react-html-id
import the package(in node modules) in App.js file by adding the code: import UniqueId from 'react-html-id';

I did the above(although I already had npm installed) and it worked!

score 3 · Answer 16 · answered Dec 24 '20 at 08:05

3

I got it after lots of trouble In react app there will be a react-app-env.d.ts file in src folder just declare module there

/// <reference types="react-scripts" />
declare module 'react-color/lib/components/alpha/AlphaPointer'

answered Dec 24 '20 at 08:05

Chetan Jain

236
6
16

score 2 · Answer 17 · answered Feb 15 '23 at 04:13

2

Created a file called index.d.ts in the src folder and added

declare module 'react-materialize';

then included the file in tsconfig.json file like:

 "include": [
   "src",
   "index.d.ts"
 ]

answered Feb 15 '23 at 04:13

yaxx

529
1
6
22

Worked for me, thanks – ardabzlk Jun 13 '23 at 16:02

score 1 · Answer 18 · answered Sep 28 '21 at 10:23

These are notes if you want to just declare types for a node module where typings are not available.

Solution--->

create a global.d.ts file inside src directory.
because typescript is already watching src directory
and thus we avoid explicitly stating in tsconfig.json to load particular type files also, because in doing so we other default typing location can get overriden

score 1 · Answer 19 · answered Oct 18 '22 at 12:07

1

I've had the same problem, The simplest solution was

npm i --save-dev @types/react-router && npm i --save-dev @types/react-router-dom

answered Oct 18 '22 at 12:07

Mustapha Rachidi

21
3

score 0 · Answer 20 · answered Jan 10 '19 at 22:08

0

For my case the issue was that the types were not getting added to package.json file under devDependencies to fix it I ran npm install --save-dev @types/react-redux note the --save-dev

answered Jan 10 '19 at 22:08

Japheth Ongeri - inkalimeva

4,909
6
29
46

score 0 · Answer 21 · answered Aug 27 '20 at 01:44

0

try adding to tsconfig.json file: "noImplicitAny": false worked for me

answered Aug 27 '20 at 01:44

Bekzat

170
1
6

3

You're basically disabling all of the goodness provided by TypeScript by doing this. Why not just use regular JS? – Matt Ruwe Nov 14 '20 at 13:17

score 0 · Answer 22 · answered Sep 13 '21 at 05:31

0

In case if you have problem with react npm install --save @types/reactnpm install --save @types/react

answered Sep 13 '21 at 05:31

Vakho Jgenti

369
3
9

score 0 · Answer 23 · answered Sep 28 '21 at 04:42

0

Like this one:

{
  "name": "some-package",
  "version": "X.Y.Z",
  "description": "Yada yada yada",
  "main": "./index.js",
  
  "typings": "./index.d.ts",
  
  "repository": "https://github.com/yadayada.git",
  "author": "John Doe",
  "license": "MIT",
  "private": true
}

Also, this error gets fixed if the package you're trying to use has it's own type file(s) and it's listed it in the package.json typings attribute

answered Sep 28 '21 at 04:42

Stive

37
1

1

do not understand your solution, what are you suggesting? – Akshay Vijay Jain Sep 28 '21 at 10:08

score 0 · Answer 24 · answered Nov 07 '21 at 01:31

0

Try npm i --save-dev @types/react-materialize if it exists or add a new declaration (.d.ts) file containing declare module 'react-materialize';

answered Nov 07 '21 at 01:31

Ali Safari

1,535
10
19

score 0 · Answer 25 · answered Jan 12 '22 at 19:29

0

You can find a proper solution over here. You just need to replace react-items-carousel with react-materialize.

answered Jan 12 '22 at 19:29

Jehangir Wahid

31
1
1
7

score -2 · Answer 26 · answered Jun 21 '19 at 05:58

-2

works just fine

npm install @types/react-materialize

answered Jun 21 '19 at 05:58

Arturas

192
1
5

3

there are no types in for react-materialize – katzmopolitan Jul 20 '19 at 20:44

score -2 · Answer 27 · answered Jan 30 '21 at 13:44

-2

There might be cases when some dependencies doest not have types and ts forces you to include types for that. There is a workaround to resolve the issue, which is to use javascript instead.

e.g.

import {Charts} from "react-charts"; //error: Could not find a declaration file for module 'react-charts'.

Workaround: const ReactChart = require("react-charts"); //no-error

answered Jan 30 '21 at 13:44

Aakash Sharma

79
1
9

you can write js in a ts file. It won't show you any errors. It is compiled to javascript only in the end after all. – Aakash Sharma Jan 30 '21 at 13:45

Typescript react - Could not find a declaration file for module ''react-materialize'. 'path/to/module-name.js' implicitly has an any type

27 Answers27

Example:

Linked