I created a new project using create-react-app and yarn 2 in vs code. The editor throws errors while importing every installed library like this:
Cannot find module 'react' or its corresponding type declarations.
The project compiles and runs successfully but the errors are still there. When I change the file's extension to .js and .jsx from.ts and .tsx, the errors disappear. How should I solve this problem for typescript files?
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.
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
/types/css.d.tstsconfig.jsonadd this object:
"include": [
"src",
"types"
]
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.
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!
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