DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Typescript Could not find declaration file for module 'react'
Mopharr
Mopharr

Posted on

Typescript Could not find declaration file for module 'react'

Typescript has made it easy to locate errors, but most time QuickFix doesn't work. The error Could not find a declaration file for module 'Module Name' often happens when you start typescript. This is because typescript couldn't find the type deceleration for a react-related module. Don't panic it is easy to solve. Let's jump on it

Image description

This is what the error message looks like in the terminal and these are ways to solve it.

  1. Install the @type package for the module
// Installing the type module with npm
npm install @type/Module-Name

// Installing the type module for react-dom with npm
npm install @type/react-dom

// Installing the type module with npm

npm install @type/react-reveal
Enter fullscreen mode Exit fullscreen mode

On the other hand, the error below might pop up when npm could not find the type of the module you are trying to install.

Image description

If you fall into this error, that the module you are trying to install doesn't provide typing. So let's discuss another way of fixing this.

  1. Using a .d.ts files

What areΒ .d.ts files? These are declaration files that contain only type information. They are only used for checking types and typescript read them the same way it does with the regularΒ .ts file which is mostly determined by the Include and Exclude setting in the tsconfig.json file

So create aΒ .d.ts file in your project file inside your project file, it can have any name you want like the react-reveal.d.ts file (mostly use the module name), let's continue. Inside the file, you need to declare the module like this.

declare module 'module-name'
Enter fullscreen mode Exit fullscreen mode

Make sure you change the module name to the module you are trying to fix the error. In most cases, this fixes the error because, with this, typescript automatically set the module type of any and the code should work fine.
In some cases, we might want to set the type ourselves, if you want to set the type you can just can this to your code

declare module 'module-name' {
    export function myFunction(): string 
}
Enter fullscreen mode Exit fullscreen mode

Unfortunately, if the error isn't clear, we might have another option to fix it,

  1. Adding the eslint-disable next line comment

You can easily resolve the error by adding the eslint-disable next line comment to ignore the error on the code and allow your typescript to run perfectly without error

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

// Example
import { Bounce } from "react-reveal";

Enter fullscreen mode Exit fullscreen mode

So, with any of these solution Typescript Could not find declaration file for module 'react' can be fix.

If you like the article and it would be beneficial, please like and share for friends to they can benefit.

Thank you

Top comments (4)

Collapse
 
lukeshiru profile image
Luke Shiru

You should avoid // @ts-ignore and use // @ts-expect-error instead, and add an explanation for the error:

// @ts-expect-error this module doesn't have types and I was lazy adding them.
import { myFunction } from 'module-name';
Enter fullscreen mode Exit fullscreen mode

That way, if the developer of the module adds types or your add them, TS will tell you to remove that // @ts-expect-error because there's no longer an error in that line.

Cheers!

Collapse
 
mopharr profile image
Mopharr Author

Thanks for the heads up luke

Collapse
 
naubit profile image
Al - Naubit

That was a good read, thank you, followed and bookmarked!

Collapse
 
mopharr profile image
Mopharr Author

Thank you Al-Naubit

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›