解决模块 ""element-plus"" 没有导出的成员 "ElMessage"。你是想改用 "import ElMessage from "element-plus"" 吗?
一、问题介绍
在使用vite+element-plus+ts搭建项目时，导入ElMessage组件遇到【模块 ""element-plus"" 没有导出的成员 "ElMessage"。你是想改用 "import ElMessage from "element-plus"" 吗?】这一错误提示
二、出现原因
ts识别不到element-plus对外暴露的ElMessage这一类型
三、解决思路
在根目录env.d.ts这个文件中添加如下声明类型代码：
1.在env.d.ts中添加如下代码：
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;
}
}
2.修改tsconfig.app.json和tsconfig.node.json文件
分别在tsconfig.app.json和tsconfig.node.json中新增一行"moduleResolution": "node",
// tsconfig.app.json
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"moduleResolution": "node",
"composite": true,
"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
"paths": { //路径映射，相对于baseUrl
"@/*": ["src/*"]
}
}
}
// tsconfig.node.json
{
"extends": "@tsconfig/node18/tsconfig.json",
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
"compilerOptions": {
"moduleResolution": "node",
"composite": true,
"module": "ESNext",
"types": ["node", "element-plus/global"]
}
}
在 TypeScript 中，moduleResolution 配置选项用于指定模块解析策略，即指定 TypeScript 编译器如何解析模块导入的路径。
至此，问题解决！
四、总结
1、问题复现: 使用npm create @vue3命令构建一个Vue3+Ts项目，安装Element Plus，在App.vue页面的script里导入ElMessage就能复现这个问题
2、错误提示不影响本地启动以及使用，只是导入的地方有波浪线提示
3、可在单个页面上通过手动声明解决该问题；在声明文件中使用则会和全局导入冲突，因为声明的类型不全，所以存在错误提示
4、moduleResolution设置为Node即可解决
解决模块 ""element-plus"" 没有导出的成员 "ElMessage"。你是想改用 "import ElMessage from "element-plus"" 吗? 更多相关文章
JavaScript CSS Vue3 实现一个简单的Loading
配置和使用nvm免安装版本(nvm-noinstall.zip)
HarmonyOS：使用Node-API实现ArkTS与C/C++跨语言交互
【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (一)：项目简介及安装依赖
【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (四)：状态码的使用
【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (五)：POST上传文件的设置
【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (六)：token的设置
【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (七)：MongoDB的设置
【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (三)：Cors的设置及.env文件的设置
【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (二)：项目文件夹架构及路由的设置
【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (八)：API说明(暂时完结，后续考虑将在线版mongoDB变为本地版)
报error:0308010C:digital envelope routines::unsupported错--nodejs版本过高(nvm安装(更换)不同版本nodejs)
小结---安装nvm解决node版本不兼容的问题（node版本切换）