Could not find declaration file for module 'X' Error in TS

# Table of Contents

# Could not find declaration file for module 'X' Error

The error "Could not find declaration file for module" occurs when TypeScript cannot find the type declaration for a module.

To solve the error, install the types for the module by running the command from the error message, e.g. npm install -D @types/module-name .

could not find a declaration file for module

The error message shows the command you should try to run when you get the error. The command in the screenshot above is:

shell

Copied!
npm i --save-dev @types/uuid

install types of typescript module

uuid is the name of the package that caused the error in the example.

If you got the error when trying to import JavaScript files in your project, you have to set allowJs to true in your tsconfig.json file. (In that case, scroll down to the tsconfig.json section)

Usually, the names of type packages are consistent - @types/module-name but you could try to look for a definition package by using the official TypeScript type search.

If you got the error when using any of the following packages, click on the link to scroll to the subheading.

If the error persists, try changing the import statement for the specific package to require().

index.ts

Copied!
// 👇️ for default export
const yourModule = require('your-module')

// 👇️ for named export
const { yourModule } = require('your-module');

# The third-party package might not provide typings

If the error persists, the third-party module you are importing might not provide typings, which means that you need to declare the module in a file with a .d.ts extension.

TypeScript looks for .d.ts files in the same places it looks for your regular .ts files, which is determined by the include and exclude settings in your tsconfig.json file.

Create a new file named module-name.d.ts next to your regular TypeScript files and add the following line to it.

module-name.d.ts

Copied!
declare module 'module-name';

Make sure to replace module-name with the name of the module that's causing the error.

This will set the type of the package to any when importing it.

If you want to add your own type definitions for the package, replace the line with the following code:

module-name.d.ts

Copied!
declare module 'module-name' {
  export function myFunction(): string;
}

The example shows how to add types for a function named myFunction that returns a string.

You only need to add type definitions for the functions you intend to import in your code.

# Solve the error when trying to import JavaScript files into a TypeScript project

If you got the "Could not find a declaration file for module 'X'" error when trying to import JavaScript files into your TypeScript files, you have to set the allowJs option to true in your tsconfig.json file.

tsconfig.json

Copied!
{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false,
    // ... your other options
  },
}

When the allowJs option is enabled, you are allowed to import files with .js and .jsx extensions in your TypeScript files.

By default, you can only import files with .ts and .tsx extensions.

The checkJs option determines if type errors should be reported in JavaScript files.

If this still doesn't work, you should try to ignore the error by adding the following lines above the import.

index.ts

Copied!
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { myFunction } from 'module-name';

Adding these lines above the import statement will suppress the error message.

# Table of Contents

# Could not find declaration file for module 'react'

The error "could not find declaration file for module 'react'" occurs when TypeScript cannot find the type declaration for a react-related module.

To solve the error install the types for the module by running the command from the error message, e.g. npm install -D @types/react.

could not find declaration file react

The error message shows the command that you should try to run when you get the error. The command in the screenshot above is:

shell

Copied!
npm i --save-dev @types/react

install types for react module

Usually, the names of type packages are consistent - @types/module-name, but you could try to look for a definition package by using the official TypeScript type search.

Other common react-related packages that cause the error are:

shell

Copied!
npm i --save-dev @types/react-dom

# 👇️ if using react-router
npm i --save-dev @types/react-router

# 👇️ if using react-router-dom
npm i --save-dev @types/react-router-dom

If the error persists, the third-party module you are importing might not provide typings, which means that you need to declare the module in a file with a .d.ts extension.

TypeScript looks for .d.ts files in the same places it looks for your regular .ts files.

This is determined by the include and exclude settings in your tsconfig.json file.

Create a new file named module-name.d.ts next to your regular TypeScript files and add the following line to it.

module-name.d.ts

Copied!
declare module 'module-name';

Make sure to replace module-name with the name of the module that's causing the error.

This will set the type of the package to any when importing it. This should be sufficient for most use cases.

If you want to add your own type definitions for the package, replace the line with the following code:

module-name.d.ts

Copied!
declare module 'module-name' {
  export function myFunction(): string;
}

The example shows how to add types for a function named myFunction that returns a string.

You only need to add type definitions for the functions you intend to import in your code.

If this still doesn't work, you should try to ignore the error by adding the following lines above the import.

index.ts

Copied!
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { myFunction } from 'module-name';

Adding these lines above the import statement will suppress the error message.

# Table of Contents

# Could not find declaration file for module 'lodash'

The error "could not find declaration file for module 'lodash'" occurs when TypeScript cannot find the type declaration for a lodash-related module.

To solve the error, install the types for the module by running the command from the error message, e.g. npm install -D @types/lodash.

could not find declaration file lodash

The error message shows the command that you should try to run when you get the error. The command in the screenshot above is:

shell

Copied!
npm i --save-dev @types/lodash

install types of lodash module

Usually, the names of type packages are consistent - @types/module-name, but you could try to look for a definition package by using the official TypeScript type search.

If the error persists, the lodash-related, third-party module you are importing might not provide typings, which means that you need to declare the module in a file with a .d.ts extension.

TypeScript looks for .d.ts files in the same places it looks for your regular .ts files.

This is determined by the include and exclude settings in your tsconfig.json file.

Create a new file named module-name.d.ts next to your regular TypeScript files and add the following line to it.

module-name.d.ts

Copied!
declare module 'module-name';

Make sure to replace module-name with the name of the module that's causing the error.

This will set the type of the package to any when importing it. This should be sufficient for most use cases.

If you want to add your own type definitions for the package, replace the line with the following code:

module-name.d.ts

Copied!
declare module 'module-name' {
  export function myFunction(): string;
}

The example shows how to add types for a function named myFunction that returns a string.

You only need to add type definitions for the functions you intend to import in your code.

If this still doesn't work, you should try to ignore the error by adding the following lines above the import.

index.ts

Copied!
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { myFunction } from 'module-name';

Adding these lines above the import statement will suppress the error message.

# Table of Contents

# Could not find declaration file for module 'uuid'

The error "could not find declaration file for module uuid" occurs when TypeScript cannot find the type declaration for a uuid-related module.

To solve the error install the types for the module by running the command from the error message, e.g. npm install -D @types/uuid.

could not find declaration file uuid

The error message shows the command that you should try to run when you get the error. The command in the screenshot above is:

shell

Copied!
npm i --save-dev @types/uuid

install types for uuid module

If this doesn't work, try installing the latest version of the uuid package and its types.

The versions between the package and the types should match or at least be very close to one another.

shell

Copied!
npm i uuid@latest

npm i --save-dev @types/uuid@latest

Now you should be able to use the package like so:

index.ts

Copied!
import { v4 as uuidv4 } from 'uuid';

console.log(uuidv4());

Usually, the names of type packages are consistent - @types/module-name, but you could try to look for a definition package by using the official TypeScript type search.

If the error persists, the uuid-related third-party module you are importing might not provide typings, which means that you need to declare the module in a file with a .d.ts extension.

TypeScript looks for .d.ts files in the same places it looks for your regular .ts files.

This is determined by the include and exclude settings in your tsconfig.json file.

Create a new file named module-name.d.ts next to your regular TypeScript files and add the following line to it.

module-name.d.ts

Copied!
declare module 'module-name';

Make sure to replace module-name with the name of the module that's causing the error.

This will set the type of the package to any when importing it. This should be sufficient for most use cases.

If you want to add your own type definitions for the package, replace the line with the following code:

module-name.d.ts

Copied!
declare module 'module-name' {
  export function myFunction(): string;
}

The example shows how to add types for a function named myFunction that returns a string.

You only need to add type definitions for the functions you intend to import in your code.

If this still doesn't work, you should try to ignore the error by adding the following lines above the import.

index.ts

Copied!
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { myFunction } from 'module-name';

Adding these lines above the import statement will suppress the error message.

# Could not find declaration file for 'styled-components'

The error "could not find declaration file for module 'styled-components'" occurs when TypeScript cannot find the type declaration for a styled-components-related module.

To solve the error, install the types for the module by running the command from the error message.

could not find declaration file styled components

Open your terminal and run the following command to solve the error.

shell

Copied!
npm i --save-dev @types/styled-components

# 👇️ you only need this if using REACT-NATIVE
npm i --save-dev @types/styled-components-react-native

install types of styled components module

Usually, the names of type packages are consistent - @types/module-name but you could try to look for a definition package by using the official TypeScript type search.

If the error persists, the style-components-related third-party module you are importing might not provide typings, which means that you need to declare the module in a file with a .d.ts extension.

TypeScript looks for .d.ts files in the same places it looks for your regular .ts files.

This is determined by the include and exclude settings in your tsconfig.json file.

Create a new file named module-name.d.ts next to your regular TypeScript files and add the following line to it.

module-name.d.ts

Copied!
declare module 'module-name';

Make sure to replace module-name with the name of the module that's causing the error.

This will set the type of the package to any when importing it. This should be sufficient for most use cases.

If you want to add your own type definitions for the package, replace the line with the following code:

module-name.d.ts

Copied!
declare module 'module-name' {
  export function myFunction(): string;
}

The example shows how to add types for a function named myFunction that returns a string.

You only need to add type definitions for the functions you intend to import in your code.

If this still doesn't work, you should try to ignore the error by adding the following lines above the import.

index.ts

Copied!
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { myFunction } from 'module-name';

Adding these lines above the import statement will suppress the error message.

I've also written a detailed guide on how to use create-react-app with TypeScript.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Could not find declaration file for module 'X' Error in TS

# Table of Contents