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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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