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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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      lt reference types  quot react-scripts quot    gt  declare module  react-color lib components alpha AlphaPointer

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  quot react-charts quot     error  Could not find a declaration file for module  react-charts   Workaround  const ReactChart   require  quot react-charts quot      no-error

User · Answer

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

User · Answer

try adding to tsconfig json file   quot noImplicitAny quot   false worked for me

User · Answer

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

User · Answer

in 2021 to create   d ts file manually  you just need to do the following  1- enter src folder 2- create global d ts file 3-declare modules in it like  declare module  module-name    i answred it here before and it was nice

User · Answer

If there is no  types  lt package gt  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  lt package gt  following  declaration files publishing DefinitelyTyped how can i contribute

User · Answer

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

User · Answer

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 -    quot typeRoots quot                  quot    node modules  types quot                quot     types quot             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

User · Answer

works just fine      npm install  types react-materialize

User · Answer

What I did was run the following commands from nodejs command prompt while in the project folder directory    npm init npm install -g webpack npm install --save react react-dom  types react  types react-dom npm install --save-dev typescript awesome-typescript-loader source-map-loader npm install ajv  6 0 0 npm i react-html-id 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

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

Examples related to reactjs

Examples related to webpack

Examples related to webpack-2