Vue3集成CKEditor5报ckeditor-duplicated-modules错误求助

错误截图：

package.json配置截图：

错误根因 #

该错误是所有CKEditor5相关依赖版本不一致，或同时混用了预构建的CKEditor包（如@ckeditor/ckeditor5-build-classic）和源码级引入的插件，导致模块重复加载。

解决步骤 #

• 统一所有CKEditor相关依赖版本
  所有@ckeditor/开头的包必须保持完全相同的版本，包括@ckeditor/ckeditor5-vue也要和核心包版本匹配。可以先删除node_modules文件夹、package-lock.json/yarn.lock文件，再重新安装所有ckeditor包并指定相同版本号，示例命令：

  npm install @ckeditor/ckeditor5-editor-classic@39.0.1 @ckeditor/ckeditor5-essentials@39.0.1 @ckeditor/ckeditor5-basic-styles@39.0.1 @ckeditor/ckeditor5-link@39.0.1 @ckeditor/ckeditor5-paragraph@39.0.1 @ckeditor/ckeditor5-font@39.0.1 @ckeditor/ckeditor5-vue@5.1.0 --save
  

• 彻底移除预构建的CKEditor包
  检查package.json中是否存在@ckeditor/ckeditor5-build-*开头的包，全部卸载，从源码编译编辑器时不能同时使用预构建版本，否则必然触发模块重复错误：

  npm uninstall @ckeditor/ckeditor5-build-classic
  

• 调整编译配置
  如果使用Vite构建项目，需要在vite.config.js中添加CKEditor相关依赖排除规则：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    optimizeDeps: {
      exclude: [
        /@ckeditor\/ckeditor5-(?!vue)/
      ]
    }
  })
  

  如果使用Vue CLI构建项目，需要先安装CKEditor对应的webpack插件：

  npm install @ckeditor/ckeditor5-dev-webpack-plugin @ckeditor/ckeditor5-dev-utils --save-dev
  

  再到vue.config.js中添加对应的CKEditor源码编译规则即可。

• font插件正确引入方式
  版本统一后直接从源码引入font相关插件，添加到plugins和toolbar配置中即可正常使用：

  // 引入font相关插件
  import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
  import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
  import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor';
  
  export default {
    name: 'app',
    data() {
      return {
        editor: ClassicEditor,
        editorData: '<p>Content of the editor.</p>',
        editorConfig: {
          plugins: [
            EssentialsPlugin,
            BoldPlugin,
            ItalicPlugin,
            LinkPlugin,
            ParagraphPlugin,
            // 新增font插件
            FontFamily,
            FontSize,
            FontColor
          ],
          toolbar: {
            items: [
              // 新增font对应工具栏按钮
              'fontFamily',
              'fontSize',
              'fontColor',
              'bold',
              'italic',
              'link',
              'undo',
              'redo'
            ]
          }
        }
      };
    }
  };
  

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