模块 ""element-plus"" 没有导出的成员 "ElMessage"。你是想改用 "import ElMessage from "element-plus"" 吗?

简介: 模块 ""element-plus"" 没有导出的成员 "ElMessage"。你是想改用 "import ElMessage from "element-plus"" 吗?

背景:在使用Element Plus写demo时,导入ElMessage组件出现 【模块 ""element-plus"" 没有导出的成员 "ElMessage"。你是想改用 "import ElMessage from "element-plus"" 吗?】的错误提示

环境:Vue3 + Vite + Ts + Element Plus

定位:问题出在ts的语法检查,import { ElMessage } from 'element-plus'; 时在框架里找不到ElMessage这个对象。


在之前的demo中,ElMessage基本都是可用的,参照Element Plus官方文档的示例使用即可,现在突然不能用了,检查了一下语法,没有变化,都是import { ElMessage } from 'element-plus'; 于是想到版本问题,可能是因为用的最新的包,所以有些类型识别不出,导致出现错误提示,由于老项目是没问题的,所以对比老项目,把Element Plus包的版本还原到 2.2.30,重新install, enmmmm 问题依然存在。


语法OK,版本OK,那么这里排除Element Plus框架的问题了,继而把焦点放到Ts,这种识别不到类型的问题,大部分和Ts有关,为了排查框架问题所以优先检查的Element Plus。


同样的做法,还原一下Ts的包版本,重新install,嗯,没用,波浪线依然存在,那就和包没关系了。既然识别不到ElMessage这个类型,那么就自然而然的想到类型声明了!


So,在import { ElMessage } from 'element-plus'; 下面手动加入声明的代码,如下:

import { ElMessage } from 'element-plus';
// 手动声明 ElMessage
declare module 'element-plus' {
  export class ElMessage {
    static success(message: string): void;
    static warning(message: string): void;
    static info(message: string): void;
    static error(message: string): void;
  }
}
ElMessage.success("提示")


这样就没问题了,错误提示解决了,因为我手动声明了类型。考虑到很多个页面都会存在该问题,索性将类型声明加入到声明文件中。


So,在vite-env.d.ts这个声明文件中做如下配置:



配置完之后,所有的.vue页面使用ElMessage时都OK。


But,mian.ts里面出现错误提示了,因为在mian里面我导入了 Element Plus,而我单独声明了element-plus这个包,里面肯定不止ElMessage,所以use的时候报错了。


当然了,这个错误提示其实并不影响我们的功能,项目是可以跑起来的。但是作为一个精致的老开发(极简风格和强迫症深度患者),是不允许项目存在波浪线的。


最后摸到Ts的配置文件,tsconfig.json,这个配置需要对Ts有一定基础,经过对Ts配置的一番研读,最后成功定位到解决方案了,在这个配置文件中将moduleResolution节点的值修改为Node:

"moduleResolution": "Node"


在 TypeScript 中,moduleResolution 配置选项用于指定模块解析策略,即指定 TypeScript 编译器如何解析模块导入的路径。


至此,问题解决!

 

省流,总结一下:


1、先说复现,使用Vite构建一个Vue3+Ts项目,安装Element Plus,在页面的script里导入ElMessage就能复现这个问题

2、错误提示不影响本地启动以及使用,只是导入的地方有波浪线提示

3、可在单个页面上通过手动声明解决该问题;在声明文件中使用则会和全局导入冲突,因为声明的类型不全,所以存在错误提示

4、moduleResolution设置为Node即可解决


PS:一时间没有在网上找到这个问题的分析,因此这里记录一下,方便自己以后查阅,把错误提示作为标题,也方便以后其他人遇到该问题时可以马上搜到此文章。

 

以上。

PS:楼主邮箱 tccwpl@163.com

目录
相关文章
|
编解码 前端开发 JavaScript
与babel的"孽缘"
Babel is a JavaScript compiler babel主要的职责就是将一些前沿时髦的JS特性通过"翻译"用到老旧的‘宿主’环境里。(浏览器,Node等)
110 0
|
JavaScript
理解JS函数调用和"this"
如果理解核心函数的调用机制,同时验证一些以核心函数为基础的其他实现方式的运行机制,关于上述所说的问题就会迎刃而解。
105 0
关于$(":button") 选择器的理解
关于$(":button") 选择器的理解
317 0
|
自然语言处理
合同结构化文书解析失败,请联系管理员排查:{"code":3001,"message":"File transform error","success":false,"tracerId":"requestId"}报错处理
在使用自然语言处理自学习平台时,标注任务需要上传标注数据,但是使用doc格式上传文件后开始标注时出现了此提示,此篇文章简单介绍下此问题的处理方式。
720 0
合同结构化文书解析失败,请联系管理员排查:{"code":3001,"message":"File transform error","success":false,"tracerId":"requestId"}报错处理
|
Android开发 HTML5 移动开发
什么是 "署名-非商业性使用-相同方式共享"
什么是 "署名-非商业性使用-相同方式共享" 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
1591 0
|
Java Android开发
"XX cannot be resolved to a type "eclipse报错及解决说明
<p>转自:<a target="_blank" href="http://zhaoningbo.iteye.com/blog/1137215">http://zhaoningbo.iteye.com/blog/1137215</a></p> <p><span style="font-family:Helvetica,Tahoma,Arial,sans-serif; font-size:
1596 0
|
数据库 .NET 开发框架
关于&lt;%# Eval(&quot;createTime&quot;%&gt;的时间格式转换
出现问题: 在ASP.NET中,前台页面在调用后台数据库时间时,使用&lt;%# Eval("createTime"%&gt;,发现时间显示的是数据库的时间类型"2015/10/29 13:40:01",想要改成"2015-10-29"的时间显示类型。 解决方法: 在&lt;%# Eval("createTime"%&gt;里添加格式样式,修改后如下: &lt;%# Eval("c
1371 0
&quot;catalog&quot; 与 &quot;category&quot; 的区别
catalog 中文翻译为: 目录; category 中文翻译为: 类别; catalog 是有一定顺序的条目(item)列表,或者是分类系统列表。 还可以用作动词,表示编目,将条目放置到某个目录下。
1632 0
|
Java API 前端开发
正确使用Class.getResourceAsStream(&quot;&quot;)与Class.getClassLoader().getResourceAsStream(&quot;&quot;)
方法getResourceAsStream("")与getResource("")均常被用于获取编译路径下指定的配置文件,用法相似,下面以getResource("")为例展示其正确用法: /** * 无package */ System.out.println(this.getClass().getResource("template.xml").getPath()
1832 0