当我们想在vue页面通过import requestfrom '@client/utils/request’引入模块时,Vetur总是会提示Cannot find module ‘@xxxx’ or its corresponding type declarations。这样的错误,同时项目不能运行(如果其他地方使用别名引入的话,如下图)。今天就解决以为这个问题。
如果使用相对导入(import myComponent from ‘…/…/…/components/myComponent’ )。当项目开发到一定规模时,不便于维护。
比如:突然有一天对api目录进行目录调整,如果使用相对导入,那么所有导入都会失效,需要重新更改路径进行导入。如果使用别名导入,可能只需要改变别名的路径即可完成api目录调整。
提示:在ts别名解析前,webpack别名是必须要配置的。
首先在tsconfig.json中添加baseUrl和paths字段。两个字段具体的作用请参考:
ts中文官网
.
下面是我项目中的配置
配置完毕后,在vue或者ts中就可以使用别名了。
最后对于一些博客问题的纠正。
有些博客中提到项目必须放到第一个,这种做法在我个人项目不是必须的。
我的项目
一、问题表述当我们想在vue页面通过import requestfrom '@client/utils/request’引入模块时,Vetur总是会提示Cannot find module ‘@xxxx’ or its corresponding type declarations。这样的错误,同时项目不能运行(如下图)。今天就解决以为这个问题。二、项目中为什么使用别名进行模块导入?如果使用相对导入(import myComponent from ‘…/…/…/components/myCompon
Cannot find
module
'@/views/login/
index
'
Failed to resolve async component default
vue
-router.esm.js:1897 Error: Cannot find
module
'@/views/login/
index
'
at
webpack
EmptyContext (
index
.js:39)
at permission.js:90
进入router中的
index
.js
component: () => import('@/views/login/
index
'),
compon
Cannot find
module
'@/utils/request' or its
cor
re
sponding
type
declaration
s.
Vetur
(
2307
原因分析解决方案
报错示例,如图所示:
上述问题的产生,一般是由于 Visual Studio Code 中安装了
Vetur
插件,它在检测 js/ts 模板时,只会检测 <script> 中的内容,而在使用 ts 语法时,<script> 标签中,会含有 lang="ts" 属性设置,如下所示:
Cannot find
module
‘@/views/test/
index
.
vue
‘ or its
cor
re
sponding
type
declaration
s.ts(
2307
)的原因
yarn start
引发错误:
app/
index
.ts(1,15): error TS
2307
: Cannot find
module
'@libraries/a' or its
cor
re
sponding
type
declaration
s.
app/
index
.ts(2,15): error TS
2307
: Cannot find
module
'@libraries/b' or its
cor
re
sponding
type
declaration
s.
vue
3 setup + ts + vite 项目问题解决:Cannot find
module
... or its
cor
re
sponding
type
declaration
s.(ts
2307
)
将这个示例放在一起时,我看到如果我之后立即再次触发相同的错误,则会得到预期的堆栈跟踪。 为什么我不能马上得到它?
堆栈跟踪示例
Debug: internal, implementation, error
Error: Uncaught, unspecified "error" event. ([object Object])
at EventEmitter.emit (events.js:144:17)
at EventEmitter.<anonymous> (/Users/karl/Development/ehealth/kazana-error-example/node_modu
“cannot find
module
'./
index
.less' or its
cor
re
sponding
type
declaration
s”是一种常见的错误提示,通常出现在使用
TypeScript
语言开发前端应用时。出现这个错误的原因通常是由于缺失某个依赖项,或者是某些依赖项未正确安装。
具体来说,这个错误通常是由于Less文件或其对应的类型声明文件(.d.ts文件)缺失或未正确引入所致。要解决这个错误,可以按照以下步骤操作:
1. 确认less和@
type
s/less两个依赖项已经正确安装。可以使用npm或yarn工具安装,例如通过运行以下命令安装:
npm install less @
type
s/less --save
2. 确认在
TypeScript
配置文件tsconfig.json中设置了正确的paths配置项,以确保能够正确地找到less文件和类型声明文件。例如,可以添加以下类型声明路径配置项:
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": ["
type
s/*", "node_
module
s/*"],
"less": ["node_
module
s/less/dist/less.min.js"]
3. 如果还是无法解决问题,可以尝试清除缓存,重新安装依赖项,重新启动开发环境。有时候,一些问题可能是由于缓存或安装不完整的依赖项所致,重新安装和清除缓存有时能够解决问题。
总之,“cannot find
module
'./
index
.less' or its
cor
re
sponding
type
declaration
s”可能是由于各种原因导致的,需要根据具体情况采取不同的解决方案。如果无法解决,可以尝试查看其他开发者的类似问题解决方法或者在相关的社区或论坛上发帖求助。
vue2.x+ts项目,在props type导入自定义接口类型报‘xxx‘ only refers to a type, but is being used as a value here处理办法
11645