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

Nl

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 - templecoding.com/blog/2016/03/31/… – Joselyn

@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 ? – Nl

There is a way - #38224732 – Joselyn

this seems like a bit of a workaround to me. – Coffer

Possible duplicate of Could not find a declaration file for module 'module-name'. '/path/to/module-name.js' implicitly has an 'any' type – Mossy

Answer 1

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 :)

Nl

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. – Configuration

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. – Shiva

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. – Rusticus

Something also worth mentioning: depending on the location of your source, you may also need to add "../types" to your "includes" array – Gausman

but when I run the app it is complaining with the same error message, how to resolve it? – Recitative

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

I have issues with react-countdown-clock, created @types folder and did all the above steps. still getting the same error. – Cacophonous

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/"] } } } – Twobit

anyone has luck with the latest version of ts? – Florafloral

Answer 2

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.

Armour

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) 👍 – Umbrage

or yarn add @types/react-router --dev – Jingoism

yarn add @types/react-router-dom Fixed it for me when using create-react-app – Frisch

Best answer. Had the same issue with react-slick as my project is a TypeScript project. Fix npm i --save-dev @types/react-slick – Kaveri

I had a similar problem with jest-axe. Solved by installing @types/jest-axe. – Disintegrate

Answer 3

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"]
}

Harl

this worked great in IntelliJ IDE, but the custom typeRoots method (which is the accepted answer) did even work in VS Code IDE – Umbrage

I think this is a hack, though this solved the problem but Is there any valid and permanent solution for this problem? – Hyperaemia

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 – Thuthucydides

Work perfect on VSC with react using typescript – Tolle

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: #41463229 – Konyn

Problem solving begins from a simplest answer to avoid blockers during development. Next step is to find more elegant and focussed solution – Harl

Answer 4

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

Faceless

Thanks! This works the best out of all the solutions mentioned here – Kremlin

Make sure to stop your react local server and start it again if it still doesn't work after doing the above. npm start – Armes

This helped alongside the response here – Zloty

Answer 5

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

Portiere

This package doesn't have a @types available yet BTW. Created an issue on the repo... github.com/geelen/react-snapshot/issues/131 – Thoughtout

In 2022: Do not use "@ts-ignore" because it alters compilation errors – Radley

Answer 6

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

Misconception

Even tough they were already installed, re-running those commands solved the problem for me. – Hrutkay

Basically, it updates your existing packages when you re-run the commands. That was the reason the problem is solved. – Consalve

npm install @types/react was enough in my case. Thx! – Konyn

Answer 7

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

Reformed

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 – Empress

Answer 8

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! :)

Conservative

This is really neat and simple. Thank you. Keep up the good work! – Sergio

Answer 9

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

Globefish

There doesn't appear to be a @types/react-materialize available – Spruce

Answer 10

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 !

Inseparable

You can also add it in "devDependencies": "devDependencies": { "@types/react-router-dom": "^5.1.8" } – Conglutinate

Note: Add types module to devDependencises – Olds

Answer 11

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.

Mcloughlin

What to do after installing this? – Hyperaemia

Answer 12

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.

Chastise

Answer 13

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.

Yongyoni

The most relevant answer that completely solves the problem, thanks! – Necktie

Cool! Tnx! npm install -D @types/react IMO would be better – Lunna

@Lunna yeah but who knows if in future just like @types/react some other module is also absent then we can go with npm install – Yongyoni

Answer 14

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
}

Involucel

Answer 15

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

1. npm init
2. npm install -g webpack
3. npm install --save react react-dom @types/react @types/react-dom
4. npm install --save-dev typescript awesome-typescript-loader source-map-loader
5. npm install ajv@^6.0.0
6. npm i react-html-id
7. 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!

Tierell

Answer 16

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'

Loudhailer

Answer 17

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"
 ]

Gurdwara

Answer 18

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

Solution--->

1. create a global.d.ts file inside src directory.
2. because typescript is already watching src directory
3. 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

Rheumatism

Answer 19

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

Caper

Answer 20

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

Vitalize

Answer 21

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

Marelya

You're basically disabling all of the goodness provided by TypeScript by doing this. Why not just use regular JS? – Philbert

Answer 22

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

Kamila

Answer 23

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

Purveyor

do not understand your solution, what are you suggesting? – Rheumatism

Answer 24

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

Reproval

Answer 25

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

Indusium

Answer 26

works just fine

npm install @types/react-materialize

Hearttoheart

there are no types in for react-materialize – Resign

Answer 27

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

Carnage

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. – Carnage