CODEWITHSUNDEEP
reactjswebpackwebpack-2
Joy
Joy

Reputation: 7028

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

Upvotes: 279

Views: 614438

Answers (27)

yaxx
yaxx

Reputation: 655

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

Upvotes: 5

Mustapha Rachidi
Mustapha Rachidi

Reputation: 43

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

Upvotes: 2

Jehangir Wahid
Jehangir Wahid

Reputation: 31

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

Upvotes: 0

Ali Safari
Ali Safari

Reputation: 1775

Try npm i --save-dev @types/react-materialize if it exists or add a new declaration (.d.ts) file containing declare module 'react-materialize';

Upvotes: 0

Akshay Vijay Jain
Akshay Vijay Jain

Reputation: 16025

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

Upvotes: 1

Stive
Stive

Reputation: 37

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

Upvotes: 0

Vakho Jgenti
Vakho Jgenti

Reputation: 405

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

Upvotes: 0

Sornin
Sornin

Reputation: 105

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 !

Upvotes: 7

Sina Abedi
Sina Abedi

Reputation: 2411

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

Upvotes: 71

Joy
Joy

Reputation: 7028

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

Upvotes: 161

Aakash Sharma
Aakash Sharma

Reputation: 79

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

Upvotes: -2

Muho
Muho

Reputation: 3536

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

Upvotes: 27

Chetan Jain
Chetan Jain

Reputation: 241

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'

Upvotes: 3

Germa Vinsmoke
Germa Vinsmoke

Reputation: 3759

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.

Upvotes: 5

Mateja Petrovic
Mateja Petrovic

Reputation: 4357

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

Upvotes: 60

Bekzat
Bekzat

Reputation: 180

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

Upvotes: 0

AlessandroASB
AlessandroASB

Reputation: 371

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

Upvotes: 37

Sylvia Pap
Sylvia Pap

Reputation: 336

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

Upvotes: 8

dkocich
dkocich

Reputation: 221

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.

Upvotes: 6

Tun
Tun

Reputation: 912

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

Upvotes: 7

Arturas
Arturas

Reputation: 202

works just fine 

npm install @types/react-materialize

Upvotes: -2

Jackkobec
Jackkobec

Reputation: 6755

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

Upvotes: 98

Japheth Ongeri - inkalimeva
Japheth Ongeri - inkalimeva

Reputation: 4969

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

Upvotes: 0

naru123
naru123

Reputation: 29

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!

Upvotes: 3

Soleil
Soleil

Reputation: 7459

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.

Upvotes: 5

Roy Art
Roy Art

Reputation: 703

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
}

Upvotes: 4

Ogglas
Ogglas

Reputation: 70184

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.

Upvotes: 218

Related Questions