React,Typescript -找不到模块...或其相应类型声明

9nvpjoqh  于 2022-11-18  发布在  TypeScript
关注(0)|答案(9)|浏览(1256)

我在vs代码中使用create-react-app和yarn 2创建了一个新项目。在导入每个已安装的库时,编辑器都会抛出如下错误:
找不到模块'react'或其Map的型别宣告。
项目成功编译并运行,但错误仍然存在。当我将文件的扩展名从.ts 和 *.tsx * 更改为 .js 和 *.jsx * 时,错误消失。如何解决typescript文件的此问题?

yh2wf1be

yh2wf1be1#

您需要为所安装的库安装类型。通常,您应该执行以下操作:

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

有时候在DefinitelyTyped repo中没有可用的类型,而您遇到了npm ERR! 404 Not Found: @types/my-untyped-module@latest。在这种情况下,您可以做几件事:

**1-**在项目的根目录下创建一个decs.d.ts文件,并在其中写入:

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

**2-**或者使用@ts-ignore简单地抑制错误:

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

**3-**或者,您可以为自己和他人做一件事,在DefinitelyTyped repo中添加库类型。

如果它仍然不工作,我首先建议您使用最新版本的Typescript。如果您这样做,然后关闭您的编辑器,删除node_modules文件夹,并再次安装依赖项(npm installyarn install),并再次检查它。

dohp0rv5

dohp0rv52#

我收到了同样的错误消息,也与导入有关。
在我的例子中,问题是由于导入一个png文件以便在SVG中使用它而引起的:

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

我收到的消息是:

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

溶液:

在项目根目录中是一个css.d.ts文件。必须为导入的各种图形扩展(类型)声明一个模块。(注意:不适用于项目中使用或引用的图形类型,但适用于导入的图形类型**)
以下是此项目的完整css.d.ts文件:

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

esbemjvw3#

我修复了我的问题
1.创建文件/types/css.d.ts
1.打开tsconfig.json
添加此对象:

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

t9aqgxwy4#

我的情况:
myFolder位于src目录下
我在此行中看到相同的错误:

import { GlobalStyle } from "myFolder";

其他的答案不起作用。
我只是把baseUrl加到compilerOptions里面的tsconfig.json上:

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

问题已解决!
参考https://www.typescriptlang.org/tsconfig#baseUrl

b4qexyjb

b4qexyjb5#

检查package.json文件中的依赖关系对象。如果安装包的格式为“@somepackage/packagename”:version;则在导入时必须使用import abc from“@somepackage/packagename”
如果“@somepackage/”不存在,那么在导入时不要使用它,只需使用import abc from“packagename”即可;

p4tfgftt

p4tfgftt6#

在我的例子中,我把我的文件命名为index.tsx,而它应该是大写的I,所以Index.tsx

qfe3c7zg

qfe3c7zg7#

在我的例子中,这只是一个由VS代码完成的自动完成导入(如“@reduxjs/toolkit/src/query/tests/mocks/server”),我在提交时没有注意到

wko9yo5t

wko9yo5t8#

也许只需重新启动TS服务器即可。

使用VsCode:

输入:Ctrl + Shift + p
选择:〉类型脚本:重新启动TS服务器

vmdwslir

vmdwslir9#

Yarn2、3有错误。
您需要使用yarn 1.22.1版本。

1. uninstall yarn

2. install yarn.

3. yarn set version 1.22.1

4. yarn policies set-version 1.22.1

相关问题