vue3报错之“An import path can only end with a ‘.tsx‘ extension when ‘allowImportingTsExtensions‘ is ..”

最新推荐文章于 2025-04-22 15:13:31 发布

原创最新推荐文章于 2025-04-22 15:13:31 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章讲述了在TypeScript项目中，当尝试在main.ts文件中导入App.tsx时，由于Eslint默认不允许导入.ts文件，除非启用了allowImportingTsExtensions选项。解决方案是直接导入文件名，无需添加.tsx扩展。

一、背景

在main.ts中打算引入App.tsx时，Eslint报错如下：

An import path can only end with a '.tsx' extension when 'allowImportingTsExtensions' is enabled.

二、解决

不需要.tsx, 直接引入文件即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端花卷

关注关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3+vite - 报错 import.meta.glob() can only accept string literals.（详细解决方案）

高级前端工程师

03-25

3615

vue3，vite，vite+vue3报错，vue3 vite报错，[plugin:vite:import-analysis] import.meta.glob() can only accept string literals.详细解决报错，vue3报错怎么办，vite报错解决方法，vue+vite爆红，浏览器控制台报错，详细教程，vite官方文档，vue如何解决报错，vite使用变量import，vite vue3项目出现错误，在vue3+vite项目中，解决报错： [plugin:vite:impor

vue3 - 解决报错 TypeError: (0 , import_node_util.parseArgs) is not a function（vue3新建项目时报错，vue3使用命令新建项目出错

高级前端工程师

05-16

3576

vue3，node.js，npm create vue，创建项目报错，无法创建项目，Vue.js - The Progressive JavaScript Framework，TypeError: (0 , import_node_util.parseArgs) is not a function，at init xx，vue报错解决，vue3如何新建项目，vue3新建项目一直失败怎么办，升级node.js还是不行，npm init vue@latest，node版本升级到什么，node版本18还是报错怎么

参与评论您还未登录，请先登录后发表或查看评论

二.TypeScript环境搭建以及基础配置

lazy_tomato的博客

03-30

935

TypeScript。

electron+html+typescript

yasinawolaopo的博客

03-17

859

除了electron、html、typescript。还有typescript中的装饰器和签名(包括接口)

The import path cannot end with a ‘.ts‘ extension

peade的博客

06-03

6621

这是在用 vite+vue+ts 的时候，项目里报出来的。页面里的代码是这么写的 <script lang="ts"> import settings from '@/settings' export default { setUp() { console.log(settings) return { settings } }, } </script> 解决方法是在tsconfig.json里改一点东西： { "compilerOptions": {

Vue3项目引入.ts文件报错：An import path can only end with a ‘.ts‘ extension when ‘allowImportingTsExtensions‘

咸鱼滚滚

08-26

4448

An import path can only end with a '.ts' extension when 'allowImportingTsExtensions' is enabled.ts-plugin(5097)

An import path can only end with a ‘.ts‘ extension when ‘allowImportingTsExtensions‘ is enabled.

热门推荐

xuelang532777032的博客

05-31

1万+

其实是不需要.ts直接引入文件名就好了。

Vue3 - 解决报错 Unhandled error during execution of scheduler flush. This is likely a Vue internals bug.

🏆 前端领域优质创作者

08-20

7304

vue3，nuxt3，报错，警告，vue3警告，Unhandlederrorduringexecutionofschedulerflush.ThisislikelyaVueinternalsbug.Pleaseopenanissueat，如何解决这个问题，vue3报错，浏览器控制台报错，页面刷新就警告，切换页面的时候警告报错，router路由切换，页面重载第一次警告，element-plus组件库警报，el-table表格，取值出现报错，组件报错，改了也不行，还是警报，依

Vue3 - 使用 Day.js 报错：xxx.isoWeek is not a function，使用 dayjs 的 isoWeek() 方法取周时，浏览器控制台报错（详细完美解决方案）

🏆 前端领域优质创作者

03-13

3861

vue3，dayjs，Day.js，isoWeek()，周，浏览器报错，dayjs/plugin/isoWeek，vue3day.js报错Uncaught(inpromise)TypeError:x.isoWeekisnotafunction，vue3如何解决该报错，vue3使用dayjs插件，使用isoWeek()报错：isoWeekisnotafunction，day.jsisoWeekisnotafunction，为什么会报错，day.jsisoWeek使用方

vue3 - element-plus报错TypeError:t.upload.addEventListener is not a function，vue+element组件库控制台报错详细解决教程

高级前端工程师

07-09

1万+

vue3，nuxt3，element-Plus，upload，上传组件，上传文件报错，本地开发没问题，部署打包上线就会报错，这个问题如何解决，还是一直报错，el-upload上传报错，vue3项目使用element上传组件打包后报错t.upload.addEventListener is not a function的解决方案，VUE3上传功能本地上传正常，打包上传后报错，打包后报错t.upload.addEv，vue3项目使用elementui-plus上传组件打包后报错t.upload.addEve

[TS]引入.ts文件报错：An import path can only end with a ‘.ts‘ extension when ‘allowImportingTsExtensions‘

最新发布

Supposelll的博客

04-22

964

在使用VSCode编辑器进行TypeScript编程时，我们经常会使用import语句导入其他的模块。然而，在某些情况下，我们可能会遇到以下错误提示：An import path can only end with a ‘.ts’ extension when ‘allowImportingTsExtensions’ is eabled。这是由于在TypeScript中，import语句引用的是模块的名称而不是具体的文件路径，因此在引用模块时不应该使用文件的扩展名。

vue3 ts import时报错An import path cannot end with a ‘.ts‘ extension

singlewalk的博客

01-29

2532

typeScript导入时是不需要加入扩展名.ts的,考虑到需要编译出可以用于。因此直接把.ts的后缀去掉就行了。的 JS，所以允许加。

Typescript配置文件(tsconfig.json)详解系列六：allowImportingTsExtensions

zzyp1927314的博客

08-05

1905

如果不使用的时候，在导入文件的时候需要加上typescript编译后的文件后缀。如果使用了就不能输出编译文件，只能输出声明文件（*.d.ts）。

VsCode提示`导入路径不能以“.ts”扩展名结束`，但是项目运行正常

H17792428039的博客

12-07

4050

VsCode提示`导入路径不能以“.ts”扩展名结束`

Option ‘allowImportingTsExtensions‘ can only be used when either ‘noEmit‘ or ‘emitDeclarationOnly‘ i

Frank_colo的博客

06-25

5321

Option 'allowImportingTsExtensions' can only be used when either 'noEmit' or 'emitDeclarationOnly' is set

TS5023 (TS) 未知的编译器选项“allowImportingTsExtensions”

qq_34752068的博客

06-20

9337

原因：该选项用于控制是否允许在 import 语句中导入 .ts 文件扩展名，它的取值可以是 true 或 false。TS5023 (TS) 未知的编译器选项“allowImportingTsExtensions”。TS5023 (TS) 未知的编译器选项“allowImportingTsExtensions”删除tsconfig文件中的"allowImportingTsExtensions": true,将moduleResolution设置为"node"，并在导入时保留文件扩展名。