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

文章目录


前言

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

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


编译报错如下

解决方式

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

c 复制代码
// tsconfig.json
{
  "compilerOptions": {
    // ....
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
    // ...
  },
}

总结

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

相关推荐
银嘟嘟左卫门8 分钟前
上手 Rokid JSAR:新手也能快速入门的 AR 开发之旅
前端
右子9 分钟前
HTML Canvas API 技术简述与关系性指南
前端·javascript·canvas
Lotzinfly10 分钟前
10个JavaScript浏览器API奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
合肥烂南瓜11 分钟前
浏览器的事件循环EventLoop
前端·面试
golang学习记12 分钟前
从0死磕全栈之Next.js after 函数详解:在响应完成后执行异步任务
前端
TeleostNaCl12 分钟前
实战 | 使用 Chrome 开发者工具修改网页源码跳过前端校验
前端·chrome·经验分享·后端·js
阿星AI工作室35 分钟前
1分钟搞定高级感PPT演示!Obsidian+Excalidraw神级玩法,手残党亲测有效
前端
liangshanbo121538 分钟前
React 19 新特性:原生支持在组件中渲染 <meta> 与 <link>
前端·javascript·react.js
浩男孩1 小时前
🍀发现个有趣的工具可以用来随机头像🚀🚀
前端
前端 贾公子1 小时前
《Vuejs设计与实现》第 18 章(同构渲染)(下)
前端·javascript·html