React, Typescript - Cannot find module ... or its corresponding type declarations

You need to install types for libraries you install. generally you should do:

npm install @types/libName // e.g. npm install @types/react-leaflet

Some times there's no types available in DefinitelyTyped repo and you encounter npm ERR! 404 Not Found: @types/my-untyped-module@latest. You can do several things in this occasion:

1- Create a decs.d.ts file in root of your project and write in it:

    declare module "libName" // e.g declare module 'react-leaflet'

2- Or simply suppress the error using @ts-ignore:

// @ts-ignore  
import Map from 'react-leaflet'

3- Or you can do yourself and others a favor and add the library types in DefinitelyTyped repo.

If it still doesn't work, I firstly recommend that you use a recent version of Typescript. if you do, then close your editor, delete node_modules folder and install the dependencies again (npm install or yarn install) and check it again.

I had the same error message, also related to the imports.

In my case, the problem was caused by importing a png file in order to use it in an SVG:

import logo from 'url:../../public/img/logo.png';

The message I received was:

Cannot find module 'url:../..public/img/logo.png' or its corresponding type declarations.

Solution:

In project root is a file css.d.ts. One must declare a module for the various graphics extensions (types) that are imported. (Note: Not for graphics types that are used or referenced in the project, but for those that are imported )

Here is the complete css.d.ts file for this project:

declare module '*.scss' {
  const css: { [key: string]: string };
  export default css;
}
declare module '*.sass' {
  const css: { [key: string]: string };
  export default css;
}
declare module 'react-markup';
declare module '*.webp';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';

I fixed my issue

1. create file /types/css.d.ts
2. open tsconfig.json

add this object:

"include": [
    "src",
    "types"
]

my situation:

myFolder is under the src dir

I see the same error in this line:

import { GlobalStyle } from "myFolder";

other answers dont work.

I simply add baseUrl to tsconfig.json inside compilerOptions:

{
  "compilerOptions": {
    "baseUrl": "src/",
//other config...
  },
  "include": [
    "src"
  ]
}

issue solved!

ref: https://www.typescriptlang.org/tsconfig#baseUrl

Check the dependencies object in package.json file. If the install package is in the format "@somepackage/packagename":version; then at the time of import you must use import abc from "@somepackage/packagename"

If "@somepackage/" is not there then don't use it at the time of import. Just simply use import abc from "packagename";

In my case I had my file named index.tsx whereas it should have been with capital I, so Index.tsx.

In my case it was just an autocomplete import (like "@reduxjs/toolkit/src/query/tests/mocks/server") done by the VS Code that I didn't notice while commiting

yarn2,3 has error for it.

you need to use yarn 1.22.1 version for it.

1. uninstall yarn

2. install yarn.

3. yarn set version 1.22.1

4. yarn policies set-version 1.22.1