Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
Ask 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
–
–
–
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
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"]
–
–
–
–
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
–
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
–
–
–
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
–
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! :)
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
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 !
–
A more hacky way is to add eg., in boot.tsx the line
import './path/declare_modules.d.ts';
declare module 'react-materialize';
declare module 'react-router';
declare module 'flux';
in declare_modules.d.ts
It works but other solutions are better IMO.
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.
–
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
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!
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'
These are notes if you want to just declare types for a node module where typings are not available.
Solution--->
create a global.d.ts file inside src directory.
because typescript is already watching src directory
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
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"
–
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.
import {Charts} from "react-charts"; //error: Could not find a declaration file for module 'react-charts'.
Workaround: const ReactChart = require("react-charts"); //no-error
–
Could not find a declaration file for module 'react-window'. '/app/node_modules/react-window/dist/index.cjs.js' implicitly has an 'any' type
See more linked questions
