解决React18+ts项目导入模块的声明报错

news2024/9/24 5:30:55

路径配置

项目路径别名的配置
ts对@指向src的目录提示是不支持的
所以需要手动配置@符号指向
在vite.config.ts

import path from 'path'
export default defineConfig({
	plugins:[react()],
	resolve:{
		alias:{
		"@":path.resolve(__dirname, './src')
		}
	}
})
	

但这时path模块引入会报错,但是其实我们已经有node所以就已经有path模块,知识缺少声明配置。所以是需要安装关于node这个库的ts声明配置:

npm i -D @types/node

安装后没有爆红,如果import后面的path爆红则修改引入:

import * as  path from 'path'

但是这时输入@是没有提示路径的
则配置路径别名提示,在tsconfig.json 中

{
  "compilerOptions": {
    //...
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },

报错

react 导入模块报错:
导入路径不能以“.tsx”扩展名结束。考虑改为导入“./App.js”
在这里插入图片描述
在声明文件vite-env.d.ts

/// <reference types="vite/client" />
declare module '*.tsx'

报错:类型“Element”的参数不能赋给类型“ReactNode”的参数。
类型“Element”缺少类型“ReactPortal”中的以下属性: key, children, type, props
在这里插入图片描述

在tsconfig.js

 "compilerOptions": {
	//...
    "moduleResolution": "node",
    
  },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/713335.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

阿里30K测试开发岗位面试过程

面试总结 a.测开岗考察内容与软开岗类似&#xff0c;难度相对较小 b.阿里是一面技术面试官协调推进面试流程&#xff0c;HR参与较少 c.遇到的面试官都很nice 一面 自我介绍项目C基础 C底层如何进行内存分配 C是面向对象的编程&#xff0c;类中默认的拷贝构造函数是浅复制…

使用 ANTMAN 工具替换 OceanBase 云平台节点

OceanBase 环境基本都会先安装 OCP 来部署、监控、运维数据库集群。但如果有机器过保等问题&#xff0c;就需要有平稳的 OCP 节点的替换方案。 作者&#xff1a;张瑞远 上海某公司 DBA&#xff0c;曾经从事银行、证券数仓设计、开发、优化类工作&#xff0c;现主要从事电信级 I…

旅游卡景区购票小程序开发定制

旅游业的蓬勃发展&#xff0c;越来越多的景区开始推出自己的旅游卡&#xff0c;以吸引更多的游客前来观光。同时&#xff0c;为了更加便捷地服务游客&#xff0c;许多景区也开始启用小程序来进行门票售卖和游客管理。针对这种情况&#xff0c;专业的小程序开发公司推出了定制旅…

机器学习-特征选择:如何使用相关性分析精确选择最佳特征?

一、引言 「特征选择」在机器学习中发挥着重要的作用&#xff0c;它的目标是从众多可用特征中挑选出最具预测能力的特征子集&#xff0c;以提高模型性能和泛化能力。然而&#xff0c;由于现实中的数据集通常具有大量特征和复杂的相关性&#xff0c;特征选择变得非常具有挑战性。…

[ 云计算 | AWS ] IAM 详解以及如何在 AWS 中直接创建 IAM 账号

本章节主要介绍 IAM 相关知识点以及在 AWS 控制台窗口如何创建一台 Amazon IAM 账号。 文章目录 一、什么是 IAM&#xff1f;二、IAM 常见种类2.1 EIAM2.2 CIAM2.3 云厂商 IAM 三、账号&#xff08;Account&#xff09;三户模型 四、认证&#xff08;Authentication&#xff09…

java使用Tess4J实现OCR图片文字识别

目录 介绍一、maven如下二、下载语言模型1.下载语言模型2.百度云下载 三、测试1.测试代码2.测试图片3.效果 介绍 Tess4J 是 Tesseract OCR 的 java api 实现库&#xff0c;你可以通过 java 调用来轻松的实现图片识别并提取文字&#xff0c;也就是 OCR 图片提取文字技术。 Tes…

黑客是什么?想成为黑客需要学习什么?

什么是黑客 在《黑客辞典》里有不少关于“黑客”的定义, 大多和“精于技术”或“乐于解决问题并超越极限”之类的形容相关。然而&#xff0c;若你想知道如何成为一名黑客&#xff0c;只要牢记两点即可。 这是一个社区和一种共享文化&#xff0c;可追溯到那群数十年前使…

mybits相关知识点

这里写目录标题 入门第一个程序步骤配置sql&#xff0c;建立数据库连接 jdbc数据库连接池简介连接池的切换总结 lombok Mybatis基础操作&#xff08;注解&#xff09;准备工作类型对应 删除简介具体代码 预编译简介优点优点1优点2 预编译的实现总结 新增简介具体代码 新增&…

如何发布插件到npm

首先 你需要注册一个npm账号 npm 网址&#xff1a;https://www.npmjs.com/ 点击 Sign in 跳转到登录页面 点击 Create Account 进行一个新建账户 注册完成后会有一封邮件发送一个一次性密码&#xff0c;到时候验证一下就行。 登录完成之后 点击你的头像 点击Account 进行验证…

ORA-01940 处理方法

问题描述 在删除用户时&#xff0c;提示 ORA-01940&#xff1a;无法删除当前连接的用户 处理方法 出现这种错误&#xff0c;是因为当前用户有连接的session。 1.通过如下语句查询对应的连接&#xff1a; select sid,serial# from v$session where usernameTSAI结果如下&am…

BACnet资料整理

BACnet stack 链接: link VS2019工程有几个编译错误&#xff0c;文件没有加入工程中 https://bacnet.sourceforge.net/ 使用该协议栈生成的几个工具 https://sourceforge.net/projects/bacnet/files/bacnet-tools/ BACnet stack BACnet基础 https://wenku.baidu.com/view/bd…

用OpenCV进行传统图像分割

1. 引言 欢迎回来&#xff0c;我的图像处理爱好者们&#xff01;本文我们将直接进入传统图像分析的新领域——图像分割&#xff0c;这是指将图像分成若干具有相似性质的区域的过程&#xff0c;从数学角度来看&#xff0c;图像分割是将图像划分成互不相交的区域的过程。 闲话少…

上海亚商投顾:沪指高开高走涨1.31% 汽车整车板块领涨

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 市场情绪 三大指数今日集体反弹&#xff0c;沪指全天高开高走&#xff0c;深成指、创业板指午后有所回落。中字头及以保险为…

3.FreeRTOS系统源码移植

目录 一、获取FreeRTOS源代码 二、FreeRTOS系统源码内容 三、FreeRTOS系统源码移植 一、获取FreeRTOS源代码 来FreeRTOS官方网站:https://www.freertos.org/ 我这里主要提供的是例程为FreeRTOS的V10.4.6版本 1、进入官网&#xff0c;点击Download FreeRTOS 2、点击Downl…

数分面试题-SQL高频考点

目录标题 1、SQL语言分类2、join连接3、列转换3.1 列转行3.2 行转列 4、分页查询5、字符串处理函数5.1 字符函数5.2 数学函数5.3 日期函数 6、索引6.1 什么是索引6.2 建立索引的优缺点6.3 索引有哪些6.4 索引为什么快6.5 什么情况下加索引6.6 怎么知道索引用没用上6.7 用过组合…

Axure教程—中继器删除与批量删除

本文介绍的是用Axure中的中继器实现删除与批量删除效果 效果 功能 1、选中某项数据删除&#xff0c;删除后提示“删除成功” 2、选择多项数据删除&#xff0c;删除后提示“删除成功”&#xff0c;如果不选取数据&#xff0c;点击”批量删除“按钮&#xff0c;提示”请至少选择…

SNMP 计算机网络管理 一文理清-管理信息库,OID,MIB结构树,SNMP协议体系结构

⬜⬜⬜ &#x1f430;&#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea;(*^▽^*)欢迎光临 &#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea;&#x1f430;⬜⬜⬜ ✏️write in front✏️ &#x1f4dd;个人主页&#xff1a;陈丹宇jmu &am…

Java接口详解

目录 接口方法 接口的属性 接口方法 在Java设计的时候, 我们所说的接口,不同于类,我们尝尝希望一个类能满足某个特定的功能,或者需求. 我们在使用Arrays类中的sort方法对对象数组进行排序,但是对象所属的类必须实现Comparable接口: 可以看到里面只有一个方法: public inter…

【动态规划算法】第二题:⾯试题08.01.三步问题

&#x1f496;作者&#xff1a;小树苗渴望变成参天大树 &#x1f389;作者宣言&#xff1a;认真写好每一篇博客 &#x1f38a;作者gitee:gitee 如 果 你 喜 欢 作 者 的 文 章 &#xff0c;就 给 作 者 点 点 关 注 吧&#xff01; 文章目录 前言 前言 今天我们开始讲解动态规…

MySQL数据库总结 之 约束(restraint) 外键约束

前三篇关于MySQL的博客&#xff0c;地址如下&#xff1a; 1. MySQL数据库 && SQL语言命令总结 && 数据类型、运算符和聚合函数汇总_Flying Bulldog的博客-CSDN博客 2. 从0到1 && 关于MySQL的数据库和表_Flying Bulldog的博客-CSDN博客 3. MySQL数据…