模块 ""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 前端开发
HLS错误处理
hls.js是一个JavaScript库,可实现HTTP Live Streaming客户端。 它依靠HTML5视频和MediaSource扩展进行播放。
6222 0
|
前端开发 Java 关系型数据库
基于ssm的台球厅管理系统,附源码+数据库+论文
本项目为新锐台球厅管理系统,支持管理员和会员两种角色。管理员可进行会员管理、台球桌管理、订单管理等;会员可查看台球桌、预约、购买商品等。技术框架基于Java,采用B/S架构,前端使用Vue+HTML+JavaScript+CSS+LayUI,后端使用SSM框架,数据库为MySQL。运行环境为Windows,JDK8+MySQL5.7+Tomcat8.5。提供演示视频及详细文档截图。
|
XML JSON 前端开发
深入对比TOML,JSON和YAML
坦率地说,在我开始与Hugo TOML合作之前,我感到羞耻是一个需要发现的新领域,但我对YAML和JSON非常熟悉。本文将帮助您了解如何通过不同的数据格式构建数据。       在Hugo中,您可以将所有这三种数据格式用于配置,前置事项和自定义数据,但TOML是用于整个项目的推荐格式。
10720 179
|
JavaScript
Vue3使用全局函数或变量的两种常用方式
这篇文章介绍了Vue 3中实现全局函数或变量的两种方法:一种是使用`provide/inject`进行依赖注入,另一种是利用`app.config.globalProperties`和`getCurrentInstance()`来注册全局属性。
2299 2
Vue3使用全局函数或变量的两种常用方式
|
机器学习/深度学习 存储 人工智能
【博士每天一篇文献-算法】改进的PNN架构Progressive learning A deep learning framework for continual learning
本文提出了一种名为“Progressive learning”的深度学习框架,通过结合课程选择、渐进式模型容量增长和剪枝机制来解决持续学习问题,有效避免了灾难性遗忘并提高了学习效率。
772 4
|
JavaScript 前端开发
vue中使用echarts实现动态图表多数据展示,带源码(x轴动态时间刷新,实时更新展示数据)
之前写项目,需要写一个图表动态展示出当前服务器的信息,在网上找了很多相关的文章,但是关于vue中使用echarts动态图表的内容比较少,自己写过之后就在这里记录一下,希望能够对大家有所帮助
2387 2
vue中使用echarts实现动态图表多数据展示,带源码(x轴动态时间刷新,实时更新展示数据)
|
存储 数据可视化 数据挖掘
scRNA-seq|Seurat 整合分析
scRNA-seq|Seurat 整合分析
1021 0
|
缓存 移动开发 JavaScript
uniapp打包发布h5项目的缓存问题
uniapp打包发布h5项目的缓存问题
2274 0
echarts折线图线条颜色和区域颜色设置
echarts折线图线条颜色和区域颜色设置
2230 0
|
JavaScript
vue3 使用element plus 打包时 报错
vue3 使用element plus 打包时 报错
412 1