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

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

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.

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

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

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

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