React中使用 ts 后,craco库配置别名时需要注意什么?

文章目录

  • 前言
    • 编译报错如下
    • 解决方式
    • 总结


前言

我们都知道craco库可以用来覆盖react配置,如设置别名等。但是在项目使用 Typescript 后,我们需要额外配置,否则会造成编译报错。

详细craco配置可以查看之前文章: 项目初始化与配置


编译报错如下

在这里插入图片描述

解决方式

找到本地tsconfig.json文件,添加如下配置,重新启动项目,报错就可以解决了

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


总结

在使用 craco库时,需要同时在 tsconfig.json 文件中配置别名,因为 craco库是用于配置 Webpack 的别名,而不是 TypeScript 的别名。TypeScript 的别名是在 tsconfig.json 文件中配置的,而 Webpack 的别名可以通过craco库进行配置。这是因为 TypeScript 和 Webpack 在处理别名时有一些不同的方式,TypeScript 会在编译时将别名替换为实际路径,而 Webpack 在打包时会使用别名来解析模块路径。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot:SpringBoot中使用Redisson实现分布式锁

一、前言 Redisson是一个在Redis的基础上实现的Java驻内存数据网格(In-Memory Data Grid)。它不仅提供了一系列的分布式的Java常用对象,还提供了许多分布式服务。 刚好项目中需要使用到分布式锁,记录一下Redisson是如何使用分布式…

PHP 页面报错Warning</b>: Cannot modify header information - headers already sent by

先给出解决方案再解释,如果急着用就不用看解释了。 解决方案一:保存php文件编码为utf-8无BOM码,具体操作可以用notepad等编辑器完成,把 sesstion_start() 放在文档所有输出(包括html标签和php的输出语句,具…

场外个股期权标的有哪些?

今天带你了解场外个股期权标的有哪些?场外个股期权是一种金融衍生品,它不在交易所内进行交割,而是在交易所以外的场所进行交易的股票期权合约。 场外个股期权标的有哪些? 场外个股期权的标的通常包括A股市场上的融资融券标的&…

掌握Django文件处理:一步步构建上传功能

创建模型 首先先进入我们的testsite项目下,打开members/models.py文件,先添加我们保存文件的数据模型: class Document(models.Model):name models.CharField(max_length255)file models.FileField(upload_touploads/) # uploads/ 是文件…

批量提取 Word 文档中的全部图片

步骤 1、打开 WinRAR 任选一个现成的压缩包双击打开 WinRAR ,或从开始菜单打开 WinRAR 2、直接把要提取图片的 Word 文档拖入 WinRAR 菜单区域 1 → 2 → 3,WinRAR 资源管理目录中的 media 就是该 Word 文档所要提取的全部图片所在文件夹 按住&#x…

【Vue】异步更新 $nextTick

文章目录 一、引出问题二、解决方案三、代码实现 一、引出问题 需求 编辑标题, 编辑框自动聚焦 点击编辑,显示编辑框让编辑框,立刻获取焦点 即下图上面结构隐藏,下面结构显示,并且显示的时候让它自动聚焦。 代码如下 问题 “…

Vue3:eachars 折线图 数据不联动 和 tooltip: trigger: ‘axis‘ 不生效,不提示数据

问题1: 点击折线图的头部数据(Email、UnionAds等) 下面数据线不联动问题 问题2:下图是没有提示数据的Demo 这是echars官网的提示数据图 3.解决办法 (1)检查是否设置:trigger:axi…

SELinux深度解析:安全增强型Linux的探索与应用(下)

🐇明明跟你说过:个人主页 🏅个人专栏:《Linux :从菜鸟到飞鸟的逆袭》🏅 🔖行路有良友,便是天堂🔖 目录 一、SELinux的工作机制 1、SELinux的三种状态:Pe…

在k8s中部署Kafka高可用集群超详细讲解

🐇明明跟你说过:个人主页 🏅个人专栏:《数据流专家:Kafka探索》🏅 🔖行路有良友,便是天堂🔖 目录 一、引言 1、Kafka简介 2、为什么在Kubernetes中部署Kafka 二、…

决策树Decision Tree

目录 一、介绍发展优点缺点基本原理 二、熵1、熵2、条件熵3、信息增益4、信息增益率 三、基尼系数四、ID3算法1、建树过程2、优点3、缺点 五、C4.51、二分法处理连续变量1、流程:2、示例 2、缺点 六、CART1、连续数据处理2、离散数据处理3、CART回归原理1、均方误差…

医学编码系统说明

简介 流程说明 登录系统 在浏览器中访问FNEHR的站点,输入医院编号、用户和密码,选择“Other”,点击“Login”按钮,登录系统: 登录后,在左边显示系统的菜单: 系统设置 医院设置 点击左侧的“Acc…

尚硅谷2024新版3小时速通Docker教程

尚硅谷2024新版3小时速通Docker教程 百度网盘:https://pan.baidu.com/s/1SncgHbdJehvZspjcrrbLSw?pwd6c27

【C语言】详解函数(下)(庖丁解牛版)

文章目录 1. 前言2. 数组做函数形参3. 函数嵌套调用和链式访问3.1 嵌套调用3.2 链式访问 1. 前言 详解C语言函数(上)的链接:http://t.csdnimg.cn/EGsfe 经过对函数的初步了解之后,相信大家已经对C语言标准库里的函数已经有初步的认知了,并且还学会了如…

【工具箱】嵌入式系统存储芯片——CS创世 SD NAND

大家都知道MCU是一种"麻雀"虽小,却"五脏俱全"的主控。它的应用领域非常广泛,小到手机手表,大到航空航天的设备上都会用到MCU.市面上目前几个主流厂商有意法半导体(其中最经典的一款就是STM32系列)…

足球俱乐部管理系统的设计

管理员账户功能包括:系统首页,个人中心,管理员管理,教练管理,用户管理,合同信息管理,赛事管理 前台账户功能包括:系统首页,个人中心,公告信息,赛事…

C++ STL - 容器

C STL(标准模板库)中的容器是一组通用的、可复用的数据结构,用于存储和管理不同类型的数据。 目录 零. 简介: 一 . vector(动态数组) 二. list(双向链表) 三. deque&#xff08…

Ansible部署 之 zookeeper集群

简介 Ansible是近年来越来越火的一款轻量级运维自动化工具,主要功能为帮助运维实现运维工作的自动化、降低手动操作的失误、提升运维工作效率。常用于自动化部署软件、自动化配置、自动化管理,支持playbook编排。配置简单,无需安装客户端&am…

LNMP网络架构的搭建

操作准备:准备三台虚拟机 安装 MySQL 服务 (1)准备好mysql目录上传软件压缩包并解压 cd /opt mkdir mysql tar xf mysql-boost-5.7.44.tar.gz (2)安装mysql环境依赖包 yum -y install ncurses ncurses-devel bison…

idea 中:运行 Application 时出错。命令行过长

一、问题描述: idea 导入新项目,在编译后,运行项目时,报以下错误: 14:47 运行 Application 时出错运行 Application 时出错。命令行过长。通过 JAR 清单或通过类路径文件缩短命令行,然后重新运行。二、问题…

在Oracle VM virtual box 中复制 CentOS 7虚拟机更改IP地址的操作

最近玩Redis主从复制的时候,我装了一个虚拟机,但主从复制需要准备3个虚拟机,这个时候,我又不想一个一个去装,我看到Oracle VM virtual box提供了一个虚拟机复制操作,于是就用了一下这个功能,发现…