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

Question

I'm trying to import components from a reaction — materialize as -

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

But when webpack matches 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. 

Any permission for this. I'm not sure how to enable this import statement to work with ts-loader and webpack.

index.js for reaction-materialization looks like it. But how to solve this to import the module into my own files.

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

Answer 1

For those who wanted to know how I overcame this. I made hacked stuff.

Inside my project, I created a folder called @Types and added it to tsconfig.json to search for all the necessary types. So it looks something like this:

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

And inside I created a file called alltypes.d.ts . Find unknown types. so for me it was unknown types, and I added it there.

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

So now typescript did not complain about types that were no longer found. :) win the situation now :)

Answer 2

I had a similar error, but for me it was react-router . I solved it by setting types for it.

 npm install --save @types/react-router 

Mistake:

 (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 want to disable it on the site, you can edit tsconfig.json and set noImplicitAny to false .

Answer 3

I had the same problem with reagi redux types. The simplest solution has been added 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"] } 

Answer 4

All you have to do is run the script below. Then uninstall / reinstall the module you want to use.

 npm install --save @types/react-redux 

Answer 5

In addition, this error is fixed if the package you are trying to use has its own file of type and which it lists in the package.json typings attribute

Same:

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

Answer 6

A more hacky way is to add, for example, in boot.tsx a line

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

from

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

in declare_modules.d.ts

This works, but other solutions are better than IMO.

Answer 7

I executed the following commands from the nodejs command line 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 react-html-id
7. import the package (in the node modules) into the 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!

Answer 8

works just fine

 npm install @types/react-materialize 

Answer 9

In my case, the problem was that the types were not added to the package.json file in devDependencies to fix this. I ran npm install --save-dev @types/react-redux note --save-dev

Answer 10

If the module you are using does not have @types/<package> , you can easily solve this problem by adding //@ts-ignore ie

 // @ts-ignore import { render } from 'react-snapshot'; 

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

publishing declaration files

Definitely how I can contribute

Answer 11

In tsconfig.json set "noImplicitAny": false fixed this for me