Could not find a declaration file for module 'module-name'. '/path/to/module-name.js' implicitly has an 'any' type

Question

I read how TypeScript module resolution works.

I have the following repository: @ts-stack/di. After compiling the directory structure is as follows:

├── dist
│   ├── annotations.d.ts
│   ├── annotations.js
│   ├── index.d.ts
│   ├── index.js
│   ├── injector.d.ts
│   ├── injector.js
│   ├── profiler.d.ts
│   ├── profiler.js
│   ├── providers.d.ts
│   ├── providers.js
│   ├── util.d.ts
│   └── util.js
├── LICENSE
├── package.json
├── README.md
├── src
│   ├── annotations.ts
│   ├── index.ts
│   ├── injector.ts
│   ├── profiler.ts
│   ├── providers.ts
│   └── util.ts
└── tsconfig.json

In my package.json I wrote "main": "dist/index.js".

In Node.js everything works fine, but TypeScript:

import {Injector} from '@ts-stack/di';

Could not find a declaration file for module '@ts-stack/di'. '/path/to/node_modules/@ts-stack/di/dist/index.js' implicitly has an 'any' type.

And yet, if I import as follows, then everything works:

import {Injector} from '/path/to/node_modules/@ts-stack/di/dist/index.js';

What am I doing wrong?

Karlkarla

For people who are looking for a place to easily find type definitions, you can use official TypeScript type search: typescriptlang.org/dt/search?search= – Sepulchral

@MohammadKermani "This page is no longer necessary. The npm and Yarn package registries now include type information for packages." – Mosesmosey

Answer 1

For the situation where you are installing your own npm package

If you're using a third party package, see my answer below.

Remove .js from "main": "dist/index.js" in package.json.

"main": "dist/index",

Also add types in package.json per the TypeScript docs:

"main": "dist/index",
"types": "dist/index",

The folder dist is where the TS compiler stores your module's files.

Karlkarla

I was struggling a little with this: When you have your own package, be sure to remove old contents of dist folder of your package (or whole node_modules in your project) and run your bundler again. Even after this edit, I still had old index.js in dist which caused the warning for me. – Darken

Thanks for this - your English wasn't very clear but this helped, my typings was incorrect. I've made a few changes to make the answer clearer. – Jenness

@Darken I had trouble with stale dist too. rm -rf ./dist/* ; tsc – Papageno

In my case what really worked was: "main": "dist/index.js", "typings": "src/index". – Crawley

Answer 2

Here are two other solutions

When a module is not yours - try to install types from @types:

npm install -D @types/module-name

Karlkarla

If you get could not find name require run this for TypeScript 2.0: npm install @types/node --save-dev – Chiquitachirico

What if module doesn't have @types package? – Barsac

@DanielKmak, it's library of typescript definitions. – Karlkarla

Example usage: const mdbreact = require('mdbreact'); const { Button, Card, CardBody, CardText, CardTitle, CardImage } = mdbreact; – Reciprocal

notable: you need to do this in addition to installing the base package (had this issue with sinon) – Prearrange

I am using react typescript project with YARN, only require worked. Thank you const yourModuleName = require('module-name'); – Antagonist

@DanielKmak I have the same question. Looks like just using require instead works. But FYI: There's a repo called DefinitelyTyped (mentioned in another answer below) that can provide types if what you are importing is popular enough. – Elveraelves

yarn version: yarn add --dev @types/module-name ... if your packages has @types – Longanimity

Thanks, it worked for me! Why does it happen though? – Statics

What if a module is yours? What to do with that module so that it does not offer this issue after published? – Dedra

Answer 3

If you're importing a third-party module 'foo' that doesn't provide any typings, either in the library itself, or in the @types/foo package (generated from the DefinitelyTyped repository), then you can make this error go away by declaring the module in a file with a .d.ts extension. TypeScript looks for .d.ts files in the same places that it will look for normal .ts files: as specified under "files", "include", and "exclude" in the tsconfig.json.

// foo.d.ts
declare module 'foo';

Then when you import foo it'll just be typed as any.

---

Alternatively, if you want to roll your own typings you can do that too:

// foo.d.ts
declare module 'foo' {
    export function getRandomNumber(): number
} 

Then this will compile correctly:

import { getRandomNumber } from 'foo';
const x = getRandomNumber(); // x is inferred as number

You don't have to provide full typings for the module, just enough for the bits that you're actually using (and want proper typings for), so it's particularly easy to do if you're using a fairly small amount of API.

---

On the other hand, if you don't care about the typings of external libraries and want all libraries without typings to be imported as any, you can add this to a file with a .d.ts extension:

declare module '*';

The benefit (and downside) of this is that you can import absolutely anything and TS will compile.

Thay

where does the compiler look for d.ts files? should you provide any config such as typeRoots? – Longspur

@Longspur It looks for .d.ts files in the same places that it will look for normal .ts files: as specified "files", "include", and "exclude" in the tsconfig.json. I would not recommend using typeRoots for this purpose: that's intended for the location of external type modules (i.e. node_modules/@types), not individual .d.ts files. – Thay

In order for this to work, I had to make declare module '...' the first line of code in the module.d.ts file, and include any imports inside the module block as opposed to before it. Before I did that, the compiler was saying that it couldn't find the module. – Aerification

Will declare module '*' ensure that only packages without typings are compiled or will it interfere with packages that do have typings at all? – Zoology

If you are getting such error when using ts-node, please have a look on ts-node docs Help! My Types Are Missing!. I've spent several hours trying to find out why compiler does not see my .d.ts. – Cogitative

When using ES6Modules do not forget to use export: export declare module 'foo'; – Emasculate

Using Angular 11, the files and include seem to be in tsconfig.app.json, not tsconfig.json. – Mousterian

If the module is a default export, remove export keyword before function definition and add the following line after function: export = getRandomNumber – Hazlitt

The link that @Cogitative posted was broken for me. Here it is: github.com/TypeStrong/ts-node/issues/866 – Icecap

Answer 4

If you need a quick fix, simply add this before the line of your import:

// @ts-ignore

Astronavigation

This causes an error in later versions of eslint: error Do not use "// @ts-ignore" comments because they suppress compilation errors @typescript-eslint/ban-ts-ignore – Hydroponics

@Hydroponics I believe you can add /* eslint-disable */ to disable eslint before you use // @ts-ignore and then add /* eslint-enable */ after your problem line of code to re-enable eslint for the rest of your file. – Corney

You can also add // eslint-disable-next-line @typescript-eslint/ban-ts-comment before the ts line – Babineaux

This isn't is a fix or an answer, but rather a way of suppressing the complaint. – Jenness

It is a fix when you want to go bed and just get it deployed. – Parmentier

Answer 5

For anyone else reading this, try renaming your .js file to .ts

Edit: You can also add "allowJs": true to your tsconfig file.

Creekmore

I have set allowJs to true but it does not work – Navigable

The easiest solution imho. Though I wonder if there are any implications to setting allowsJS to true. It seems it was set to false by default. – Outfoot

Answer 6

TypeScript is basically implementing rules and adding types to your code to make it more clear and more accurate due to the lack of constraints in Javascript. TypeScript requires you to describe your data, so that the compiler can check your code and find errors. The compiler will let you know if you are using mismatched types, if you are out of your scope or you try to return a different type. So, when you are using external libraries and modules with TypeScript, they need to contain files that describe the types in that code. Those files are called type declaration files with an extension d.ts. Most of the declaration types for npm modules are already written and you can include them using npm install @types/module_name (where module_name is the name of the module whose types you wanna include).

However, there are modules that don't have their type definitions and in order to make the error go away and import the module using import * as module_name from 'module-name', create a folder typings in the root of your project, inside create a new folder with your module name and in that folder create a module_name.d.ts file and write declare module 'module_name'. After this just go to your tsconfig.json file and add "typeRoots": [ "../../typings", "../../node_modules/@types"] in the compilerOptions (with the proper relative path to your folders) to let TypeScript know where it can find the types definitions of your libraries and modules and add a new property "exclude": ["../../node_modules", "../../typings"] to the file. Here is an example of how your tsconfig.json file should look like:

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "sourceMap": true,
        "outDir": "../dst/",
        "target": "ESNEXT",
        "typeRoots": [
            "../../typings",
            "../../node_modules/@types"
        ]
    },
    "lib": [
            "es2016"
    ],
    "exclude": [
        "../../node_modules",
        "../../typings"
    ]
}

By doing this, the error will go away and you will be able to stick to the latest ES6 and TypeScript rules.

Capeskin

It only worked for me if I named the typings file index.d.ts. Other than that, this was the only solution that worked all round for me. – Coatbridge

Also worked for me (didn't need to change the name to index.d.ts). For those who are using the default app structure of ng new app-name, you will probably need your paths to have one level, like this: "../node_modules" and "../typings", etc. Also, make sure that the module-name part in declare module 'module_name' statement is exactly the same as the way you are importing it in your original file. For example: in my case, it needed to be: declare module 'videojs-record/dist/videojs.record.js', because that's how I was importing it in the original file. – Pestilential

If I have one folder (where my app/components live) in "include" in my tsconfig.json file which is different than where the typings folder lives then I shouldn't need to add the "excludes":... part right? – Overgrowth

Answer 7

This way works for me:

1. add your own declaration in a declaration file such as index.d.ts(maybe under the project root)

declare module 'Injector';

2. add your index.d.ts to tsconfig.json

  {
    "compilerOptions": {
        "strictNullChecks": true,
        "moduleResolution": "node",
        "jsx": "react",
        "noUnusedParameters": true,
        "noUnusedLocals": true,
        "allowSyntheticDefaultImports":true,
        "target": "es5",
        "module": "ES2015",
        "declaration": true,
        "outDir": "./lib",
        "noImplicitAny": true,
        "importHelpers": true
      },
      "include": [
        "src/**/*",
        "index.d.ts",   // declaration file path
      ],
      "compileOnSave": false
    }

Leucopenia

This solved it for me. I also added a folder named typings in my project root. Inside I added the .d.ts file – Overgrowth

doesn't works with react-bootstrap elements – Therm

Unknown compiler option 'include'. Oh right, this is outside of compilerOptions, that is what I was doing wrong. – Flash

Answer 8

Unfortunately it's out of our hands whether the package writer bothers with a declaration file. What I tend to do is have a file such index.d.ts that'll contain all the missing declaration files from various packages:

Index.d.ts:

declare module 'v-tooltip';
declare module 'parse5';
declare module 'emoji-mart-vue-fast';

and reference it to in your tsconfig.js:

"include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "index.d.ts" // this
  ]

Ebonieebonite

Answer 9

Just create a file named typings.d.ts in the root directory of your project. Inside this file just add declare module <module_name>. Here, module_name can be any module's name that you want to import. Finally, open the tsconfig.json file and include the file typings.d.ts inside the array named as include array.

// typings.d.ts 
declare module 'abc-module';

// tsconfig.json 
{
  ...
"include": [
    "src", "typings.d.ts"
  ]
}

// BOOM, Problem solved!!!

This technique provides your module with a type named "any". For more info: https://medium.com/@steveruiz/using-a-javascript-library-without-type-declarations-in-a-typescript-project-3643490015f3

Lyle

Answer 10

This worked for me.

// modules.d.ts 
declare module 'my-module';

// tsconfig.json 
{
  ...
  "include": [
    ...
    "src", "modules.d.ts"
  ]
}

// Import
import * as MyModule from 'my-module'
...
const theModule = MyModule()
...

Becht

Answer 11

This is the way I made it to work.

In my case I used a library that doesn't have types defined: react-mobile-datepicker

a. Create a folder inside /src. In my case I used this path: /src/typings/.

b. Create a .d.ts file. For my example: /src/typings/react-mobile-datepicker.d.ts

c. I used the following code to extend its properties and making it type safe:

declare module 'react-mobile-datepicker' {
  class DatePicker extends React.Component<DatePickerProps, any> {}

  interface DatePickerProps {
    isPopup?: boolean;
    theme?: string;
    dateConfig?: DatePickerConfig;
  }

  export interface DatePickerConfig {
    prop1: number;
    pro2: string;
  }
  export default DatePicker;
}

d. Import your types as you would normally do where you are using the 3rd party library.

import DatePicker, { DatePickerConfig, DatePickerConfigDate } from 'react-mobile-datepicker';

e. Change tsconfig.json and add this piece of code:

{
  "compilerOptions": {
    //...other properties
    "typeRoots": [
      "src/typings",
      "node_modules/@types"
    ]
  }}

Links to articles that I used as a source:

https://templecoding.com/blog/2016/03/31/creating-typescript-typings-for-existing-react-components

https://www.credera.com/insights/typescript-adding-custom-type-definitions-for-existing-libraries

Wedurn

Answer 12

Solution: All you have to do is edit your TypeScript Config file tsconfig.json and add a new key-value pair as

"compilerOptions": {
"noImplicitAny": false
}

Coptic

Won't this just remove the error messages instead of solving the issue? – Button

This will have much broader impacts to your typescript type checking than just making this import work. Proceed with caution and read up on this setting to make sure you want all the side effects. – Assam

If you find yourself turning this off, you might as well run in javascript. The other options in this answer are much better alternatives. Sure, any types gives you a way to morph objects and stuff round pegs into square holes, but you lost knowledge about what input to expect. You can add type guards, however with no any this is done at transpile time, type guards are done at runtime. – Loads

Answer 13

A simple fix:

// example.d.ts
declare module 'foo';

If you want to declare an interface of an object (Recommended for big projects) you may use :

// example.d.ts
declare module 'foo'{
    // example
    export function getName(): string
}

How to use that? simple..

const x = require('foo') // or import x from 'foo'
x.getName() // intellisense can read this

Subsolar

Answer 14

Check the "tsconfig.json" file for compilation options "include" and "exclude". If it does not exist, just add them by informing your root directory.

// tsconfig.json
{
  "compilerOptions": {
  ...
  "include": [
    "src", 
  ],
  "exclude": [
    "node_modules", 
  ]
}

I solved my silly problem just by removing the extension statement "*.spec.ts" from the "exclude", because when including the "import" in these files, there were always problems.

Nightshade

Answer 15

In most cases you would likely install a types package for your dependency, either way you could add allowJs -> true in your tsconfig.json file

Hahnemann

I faced this issue with express.js, after installing @types/express it was solved. – Drumhead

Answer 16

If you have installed the module and still getting the error, a short and sweet solution is to ignore the error message by adding the following line above that line

// @ts-ignore: Unreachable code error

Communicant

Answer 17

The answers from @ktretyak and @Retsam are correct but I would like to add a complete real time example and what I had to do:

Error:

Error TS7016 (TS) Could not find a declaration file for module 'react-region-select'.

'C:/Repo/node_modules/react-region-select/lib/RegionSelect.js' implicitly has an 'any' type.

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

Running npm i --save-dev @types/react-region-select gives the error:

npm ERR! code E404

npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2freact-region-select - Not found

npm ERR! 404 '@types/react-region-select@latest' is not in the npm registry.

npm ERR! 404 You should bug the author to publish it (or use the name yourself!)

npm ERR! 404 Note that you can also install from a npm tarball, folder, http url, or git url.

Given that create-react-app creates a file called react-app-env.d.ts I tried to put declare module 'react-region-select'; in there but I still received the error.

I then created a new folder in src called typings and a file called react-region-select.d.ts. In there I declared the module like this:

declare module 'react-region-select';

After doing it like this the error disappeared and I could import it like the documentation states:

import RegionSelect from "react-region-select"; 

https://github.com/casavi/react-region-select

Chiquitachirico

Answer 18

In my case, 3 different ways of resolving this issue are all not working. Once you set "type" as "module" in package.json then it will comply with ES Module instead of CommonJS syntax. I was able to resolve this by using ES Module syntax according to my package.json settings.

import ws from 'ws'

export const create = (/** @type {string} */ accessToken) => {
    const WebSocket = ws;
    return new WebSocket(endpoint, accessToken, sslOptions);
}

This way you are able to use the WebSocket class in 'ws' module. It's an example of a node module but you can basically put any type of node module and the functions in it.

Those are NOT working for me below:

1. npm install -D @types/module-name
2. const foo = require('module-name');

// index.d.ts
declare module 'foo';

4. configurations from tsconfig.json

"noImplicitAny": true,
"allowJs": true

Arawak

Answer 19

I've tried everything here, but for me it was a completely different issue: I had to remove from my *.d.ts any import statements:

import { SomeModuleType } from '3rd-party-module';

After removing the error went away...

Clarification: When we declare a module in a *.d.ts file, it's automatically picked up by the Typescript compiler as an ambient module (the one you don't need to import explicitly). Once we specify the import ... from ..., the file now becomes a normal (ES6) module, and hence won't be picked up automatically. Hence if you still want it to behave as an ambient module, use a different import style like so:

type MyType: import('3rd-party-module').SomeModuleType;

Branle

That's a dynamic import and returns a promise... it would only work in an Async context. Good thing to know though. – Bookcraft

In effect, if you follow any of the other upvoted answers to this question, but there happens to be a normal "import" in your *.d.ts file, then your *.d.ts file will be silently ignored. – Darnall

Answer 20

I was facing the same problem with many packages in many projects. So i created Declarator, a npm package that generate type declarations automatically.

It basically works by running tsc --emitDeclarationOnly in the background.

You can install it from npm:

npm install --save-dev declarator
yarn add -D declarator

Then create a simple declarator.json file:

{
  "$schema": "https://raw.githubusercontent.com/ArthurFiorette/declarator/master/schema.json",
  "packages": ["package1","package2"]
}

And create a script to run it:

Using postinstall script will run it on every package installation, may be useful

{
  "scripts": {
    "postinstall": "declarator"
  }
}

It won't generate powerful types and you'll probably encounter many any types along the way, but it's much better with than without

Read more: https://github.com/ArthurFiorette/declarator#readme

Industrialist

Answer 21

I was getting this too, had me baffled for a while, even with the module and types already installed and reloading my IDE several times.

What fixed it in my case was terminating terminal processes, removing node_modules, clearing the node package manager cache and doing a fresh install then re-loading the editor.

Canaster

Answer 22

I had the same issue using a node module with a react application written in typescript. The module was successfully installed using npm i --save my-module. It is written in javascript and exports a Client class.

With:

import * as MyModule from 'my-module';
let client: MyModule.Client = new MyModule.Client();

Compilation fails with the error:

Could not find a declaration file for module 'my-module'. 
'[...]/node_modules/my-module/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/my-module` if it exists or add a new declaration (.d.ts) file containing `declare module 'my-module';`

@types/my-module does not exist, so I added a my-module.d.ts file next to the one where my-module is imported, with the suggested line. I then got the error:

Namespace '"my-module"' has no exported member 'Client'.

The client is actually exported and works normally if I use it in a js app. Also, the previous message tells me that the compiler is looking in the right file (/node_modules/my-module/lib/index.js is defined in my-module/package.json "main" element).

I solved the issue by telling the compiler I do not care about implicit any, that is, I set to false the following line of the tsconfig.json file:

    "noImplicitAny": false,

Backsaw

I mean, this works but you're losing the ability to strictly type the rest of your code. It's not a great workaround. – Spoondrift

Answer 23

If you are seeing this error in Webstorm, and you just installed the package, you might need to restart the typescript service before it will pick it up.

• Open the help menu
• Find an action
• Search for Restart Typescript Service

Juliannajulianne

Answer 24

The problem is that you have typescript configured with "old" moduleResolution. If you edit tsconfig.json to have moduleResolution: "nodenext", it will correctly find the types from the package.json definitions.

Unfortunately, that will probably cause a lot of headache in your current repo.

Therefore you can use this workaround:

Add a re-exporting .ts file for every entry that isn't in the exact path that TS thinks it is.

So in your case, you would add /index.ts to your package (yes, with the .ts extension, do not convert to .js), and it should contain simply

// Stub to make TS happy. Do not add an extension to the import!
export * from "./dist"

The path you're re-exporting should not have extensions, so that TS will try resolving it and will find the index.d.ts types file that's connected to it. If your types file is not named in a way that TS will find it when importing from the javascript, you have to rename it.

If you are creating a package with exports, the same thing applies. Suppose you have an export /vite which loads from /dist/vite.mjs, you have to add the file /vite/index.ts which does export * from "../dist/vite". Only TS will read this file.

Gimcrack

Answer 25

You may need create the file with .d.ts extension.

push this file name under include key of tsconfig.json file:

  "include": [
    "src",
    "index.d.ts"
  ]

Menswear

Answer 26

Building on Retsam's answer, you can also use wildcards (*) in yourDeclarations.d.ts file. For example, if you're trying to import a file, such as a .css or .webp file, you can place a * at the beginning of the file type declaration. It'd look something like this ⤵︎

declare module '*.webp';

Now you can import all the .webp files you'd like without any linting errors.

Detonate

Answer 27

In my case, adding paths alias worked and typescript found the declaration file:

// tsconfig.json
{
    "compilerOptions": {
        ...
        paths: {
            "*": ["@types/*"]
        }
    }
}

And then add declaration files you need to @types/ folder:

declare module 'not-found-module' {
    // your declations
}

Lightship

Answer 28

What works for me is installed the dependencies as dev dependencies. Above solution of disabling implicit type checking works but that kept me away from getting advantage of strictly typed code. So what you have to do is to just append the all the @types module installation with --save-dev flag.

Amberlyamberoid

Answer 29

just run this command and will solve the problem

npm install --save @types/node-forge

more info in the next link

https://www.npmjs.com/package/@types/node-forge

Pneumoconiosis

That only works for the package node-forge though – Gimcrack

Answer 30

If import is not working for you

import * as html2pdf from 'html2pdf.js';

Comment the code, keep the below script file in index.html as given in the official docs.

<script src="https://rawgit.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.min.js"></script>

And declare the html2pdf variable in the component you are using it.

declare var html2pdf: any;

That's it. I was stuck in this issue for 2 days, but finally got it resolved.

Geometrician

Answer 31

create the file with an arbitrary name and .d.ts extension.

ex: index.d.ts

push this file name under include key of tsconfig.json file:

  "include": [
    "src",
    "index.d.ts"
  ]

Stettin

Answer 32

From the Typescript documentation:

Note that the "typings" field is synonymous with "types", and could be used as well.

Also note that if your main declaration file is named index.d.ts and lives at the root of the package (next to index.js) you do not need to mark the types property, though it is advisable to do so.

For some reason my "types" property was pointing to some main.d.ts. Removed the line from the package.json and it started working.

Egerton

Answer 33

For me, when I switch to my laptop and making sure I git fetch and git pull and npm install, one of the packages (namely, ts-pattern) has caused this error.

The way I've solved this is to do npm clean-install. I think there was a problem with package-lock.json or something.

Willettewilley

Answer 34

I had the same problem with uuid module in angular project.

Definitely not for prod, but putting '// @ts-ignore' on the previous line has quickly "solved" my problem.

Beiderbecke

suppressing ts errors won't fix the problem with types inferring – Mercado

well this did work for me – Dandle

In my case, there were no TS types for the package I was using and I think this is a fine way if not the best to fix it. – Butene

Answer 35

Nobody mentioned here, but my solution was a simple restart in the last time I encountered this problem.

• Stop the npm start process
• Again, run command npm start and it started working.

Strand

Answer 36

Just add // @ts-ignore before import like that:

// @ts-ignore
import replace from 'replace'

Stately

If you do this, you lose type checking. If you really can't get a fixed package or separate @types/replace definition, you could import it in a wrapper file and re-export with proper types added by you. – Gimcrack

Answer 37

for people who are getting this error in React, in tsconfig.json, set

"compilerOptions" : {
  ...
  "strict": false,
  ...
}

the auto-generated config from React's create-react-app has that flag set to true

Tracey

Any downside with strict:false? – Sculpsit

this hotfix worked for me – Dichromic

Answer 38

All you have to do is edit your TypeScript Config file (tsconfig.json) and add a new key-value pair as "noImplicitAny": false

Instead

This would nullify the benefits of using Typescript. You're basically silencing the warning instead of fixing it – Venita

Answer 39

import { io, Socket,SocketIOClient } from 'socket.io-client';

Adding this on top of component.ts worked in my case.

Marchesa

Answer 40

Simply you can import it using require as following code:

var _ = require('your_module_name');

Laylalayman