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