Let's Get Started

Why does this occur?

Typescript cannot reference the type of the module being imported and also cannot detect what kind of module is being imported, i.e, the file extension. So for Typescript to be able to reference the type and also to be able to know what kind of file it is it has to be explicitly stated.

Note : This doesn't happen in javascript files, the import statement works normally

How to fix it?

The following steps show how to solve the issue of module not found error by Typescript in React Js :

1. Create an image.d.ts file in the src directory of your project

2. Add the following code :

   declare module "*.png"; declare module "*.svg"; declare module "*.jpeg"; declare module "*.jpg";

3. The following code in your file will help to specify all image type possible or available by an import and if there are others feel free to add them

4. In your ts.config.json file add the code below

5.  "compilerOptions": {
            "typeRoots" : ["node_modules/@types", "src/types"]
       }
    "include": [
        "src",
        "src/declaration.d.ts",
      ]
   

Note: In the ts.config.json file don't delete everything, just add the piece of code that's missing from yours

After following the steps above restart your server and your code should be working fine.

Thanks for reading don't forget to like, share and follow