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 compining 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 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 to resolve this for the module import in my own files ..

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

回答1:

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

回答2:

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.

回答3:

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

回答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

回答5:

If there is no @types/<package> for the module you are using, you may easily fix the issue by adding // @ts-ignore i.e.

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

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

declaration files publishing

DefinitelyTyped how can i contribute

回答6:

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
}

回答7:

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.

回答8:

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!

回答9:

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

回答10:

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.

回答11:

works just fine

npm install @types/react-materialize

来源：https://stackoverflow.com/questions/41462729/typescript-react-could-not-find-a-declaration-file-for-module-react-material

标签

reactjs

Webpack

webpack-2