element-plus de message消息模块效果问题

问题遇到的现象和发生背景

用element-plus de message消息模块，效果没达到官网显示的，使用其他组件都正常，有朋友遇到过吗？

问题相关代码，请勿粘贴截图

<template>
  <el-button text @click="open">Click to open the Message Box</el-button>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'

const open = () => {
  ElMessageBox.alert('This is a message', 'Title', {
    confirmButtonText: 'OK',
    callback: (action: Action) => {
      ElMessage({
        type: 'info',
        message: `action: ${action}`,
      })
    },
  })
}
</script>

运行结果及报错内容

我想要达到的结果

能像官网一样的效果

已自己解决，问题在于用了官网的自动导入，就不需要在import组件，因为你import时候是找不到的，我自己是因为看到有红线忍不住import了