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';