After element-plus is introduced through CDN, the component used is missing and an error is reported

Question

In order to reduce the packaging volume, I set up externals using webpack and put element-plus inside.

module.exports = {
        //plugins: [aPlugin],
        externals: {
            vue:'Vue',
            vditor: "Vditor",
            axios: 'axios',
            "element-plus": "ElementPlus",
        },
};

An error occurred when accessing again after packaging. enter image description here

Below is the configuration of some of my content:

//main.js
import {createApp} from 'vue'
import App from './App.vue'
import router, {routerHistory} from './router'
import ElementPlus from 'element-plus'

URLSearchParams.prototype.appendIfExists = function (key, value) {
    if (value !== null && value !== undefined && value !== '') {
        this.append(key, value)
    }
}
const app = createApp(App)
app.use(router).use(ElementPlus).mount('#app')

html

<template>
  <el-button/>
</template>

I want to know if there is any other configuration required?