281

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

Improve this question
5

27 Answers 27

Reset to default
220

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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) 👍
or yarn add @types/react-router --dev
yarn add @types/react-router-dom Fixed it for me when using create-react-app
Best answer. Had the same issue with react-slick as my project is a TypeScript project. Fix npm i --save-dev @types/react-slick
I had a similar problem with jest-axe. Solved by installing @types/jest-axe.
161

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

Improve this answer

9 Comments

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.
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.
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.
Something also worth mentioning: depending on the location of your source, you may also need to add "../types" to your "includes" array
I have issues with react-countdown-clock, created @types folder and did all the above steps. still getting the same error.
|
100

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"]
}
Improve this answer

8 Comments

this worked great in IntelliJ IDE, but the custom typeRoots method (which is the accepted answer) did even work in VS Code IDE
I think this is a hack, though this solved the problem but Is there any valid and permanent solution for this problem?
Work perfect on VSC with react using typescript
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: stackoverflow.com/questions/41462729/…
Problem solving begins from a simplest answer to avoid blockers during development. Next step is to find more elegant and focussed solution
|
71

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

Improve this answer

4 Comments

Thanks! This works the best out of all the solutions mentioned here
Make sure to stop your react local server and start it again if it still doesn't work after doing the above. npm start
This helped alongside the response here
Saved my life. Thanks
61

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

Improve this answer

2 Comments

This package doesn't have a @types available yet BTW. Created an issue on the repo... github.com/geelen/react-snapshot/issues/131
In 2022: Do not use "@ts-ignore" because it alters compilation errors
38

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

Improve this answer

3 Comments

Even tough they were already installed, re-running those commands solved the problem for me.
Basically, it updates your existing packages when you re-run the commands. That was the reason the problem is solved.
npm install @types/react was enough in my case. Thx!
27

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
Improve this answer

1 Comment

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

Improve this answer

1 Comment

This is really neat and simple. Thank you. Keep up the good work!
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
Improve this answer

1 Comment

There doesn't appear to be a @types/react-materialize available
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 !

Improve this answer

2 Comments

You can also add it in "devDependencies": "devDependencies": { "@types/react-router-dom": "^5.1.8" }
Note: Add types module to devDependencises
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.

Improve this answer

1 Comment

What to do after installing this?
5

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.

Improve this answer

Comments

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.

Improve this answer

3 Comments

The most relevant answer that completely solves the problem, thanks!
Cool! Tnx! npm install -D @types/react IMO would be better
@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
5

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"
 ]
Improve this answer

Comments

4

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
}
Improve this answer

Comments

3

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!

Improve this answer

Comments

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'
Improve this answer

Comments

2

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

Improve this answer

Comments

1

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
Improve this answer

Comments

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

Improve this answer

Comments

0

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

Improve this answer

1 Comment

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

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

Improve this answer

Comments

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

Improve this answer

1 Comment

do not understand your solution, what are you suggesting?
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';

Improve this answer

Comments

0

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

Improve this answer

Comments

-2

works just fine 

npm install @types/react-materialize
Improve this answer

1 Comment

there are no types in for react-materialize
-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

Improve this answer

1 Comment

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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.