CKEditor5插件无法使用：hex-color-picker已注册DOM异常求助

在SharePoint站点加载的React+TypeScript项目中，给CKEditor5添加颜色选择器插件时，只要添加任意插件就会触发控制台报错：

DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "hex-color-picker" has already been used with this registry

本人并未自定义过hex-color-picker组件，相关代码如下：

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { Bold } from '@ckeditor/ckeditor5-basic-styles';

<CKEditor
       editor={ ClassicEditor }
       config={{
        extraPlugins: [this.uploadPlugin],
        plugins: [Bold]
       }}
       data="<p>Hello from CKEditor 5!</p>"
       onReady={ editor => {             
        console.log('Editor is ready to use!', editor);
       } }
       onChange={ (event, editor) => {
        const data = editor.getData();
        console.log({ event, editor, data });
        } }
      />

package.json依赖：

"@ckeditor/ckeditor5-build-classic": "^38.0.1",
"@ckeditor/ckeditor5-react": "^6.0.0",

解决方案 #

• 不要直接覆盖plugins配置项
  CKEditor5的官方构建包（如classic build）已内置一批插件，直接设置plugins: [Bold]会完全替换原有插件集合，而部分内置插件依赖hex-color-picker自定义元素，重复加载时就会触发注册冲突。应改用removePlugins移除不需要的插件，保留原有插件集合，再通过extraPlugins添加自定义插件。修改后的配置示例：

  config={{
    extraPlugins: [this.uploadPlugin],
    // 如需移除内置插件，用removePlugins而非替换plugins数组
    // removePlugins: ['Italic', 'Underline']
  }}
  

• 排查重复加载的CKEditor资源
  SharePoint环境中可能存在全局加载的CKEditor资源，与项目本地安装的包产生冲突。检查页面中是否有其他脚本引入了CKEditor组件，确保仅通过npm依赖加载一次。

• 升级CKEditor版本
  当前使用的38.0.1版本较旧，后续版本修复了部分自定义元素注册冲突问题。尝试升级到最新兼容版本，示例依赖：

  "@ckeditor/ckeditor5-build-classic": "^40.0.0",
  "@ckeditor/ckeditor5-react": "^7.0.0"
  

  注意升级后需检查API变更，适配新版本用法。

• 检查自定义插件uploadPlugin
  如果this.uploadPlugin是自研插件，确认其内部是否重复引入了依赖hex-color-picker的模块，或在初始化时重复注册了自定义元素。

内容的提问来源于stack exchange，提问作者private7