vite+react+typescript 遇到的问题

WeirdOwl

已于 2023-11-17 16:13:25 修改

阅读量1.9k

点赞数 3

文章标签： react.js typescript 前端

于 2023-11-17 15:40:24 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43383334/article/details/134464415

版权

文章讲述了在使用Vite开发过程中遇到的问题，如模块查找、tsconfig.json配置、jsx处理、React引用等，涉及到了`moduleResolution`、`allowImportingTsExtensions`等编译器选项，以及如何解决相关错误和配置建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.找不到模块“vite”。你的意思是要将 “moduleResolution” 选项设置为 “node”，还是要将别名添加到 “paths” 选项中

tsconfig.json 中 compilerOptions:{“moduleResolution”: node}

2.未知的编译器选项“allowImportingTsExtensions”
该选项用于控制是否允许在 import 语句中导入 .ts 文件扩展名，它的取值可以是 true 或 false。但是，从 TypeScript 3.8 开始，这个选项已经被废弃了

删除tsconfig文件中的"allowImportingTsExtensions": true,

3.vite.config.ts配置文件中__dirname解析不到
npm install @types/node --save-dev

4.类型“JSX.IntrinsicElements”上不存在属性“div”。

tsconfig.json 中 compilerOptions:{“moduleResolution”: node}

5. ReferenceError: React is not defined
方案一
在报错的文件引入 React
import React,{ useState } from ‘react’ 作者：doubleyong https://www.bilibili.com/read/cv19649507/ 出处：bilibili

方案二
如果这样配置了，
react({
babel: {
plugins: [“@babel/plugin-transform-react-jsx”],//解决编译不成功jsx问题
},
})
去掉{
babel: {
plugins: [“@babel/plugin-transform-react-jsx”],//解决编译不成功jsx问题
},
}
方案三
直接升级到最新版本的vscode软件。

6. build An import path can only end with a ‘.tsx’ extension when ‘allowImportingTsExtensions’ is enabled.
方案一
不写文件后缀：是因为新版本在导入模块时，可以不添加.tsx扩展名
方案二
tsconfig.json 中 compilerOptions:{“allowImportingTsExtensions”: true}
注：会报错未知的编译器选项“allowImportingTsExtensions”。只能忽视