React-Vite项目中ckeditor-duplicated-modules错误的修复咨询

问题场景 #

在React-Vite项目中集成CKEditor时，运行代码触发了ckeditor-duplicated-modules错误，相关代码及错误信息如下：

项目中使用的CKEditor代码 #

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

import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import List from '@ckeditor/ckeditor5-list/src/list';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
const editorConfiguration = {
    plugins: [Essentials, Autoformat, Bold, Italic, BlockQuote, Heading, List, Paragraph],
    toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'],
};
const CkEditor = () => {
    return (
        <div>
            {/* CKEditor */}
            <CKEditor editor={ClassicEditor} config={editorConfiguration} />
        </div>
    );
};

export default CkEditor;

触发的错误信息 #

chunk-Y6I26ZUC.js?v=e5c47c95:9145 Uncaught CKEditorError: ckeditor-duplicated-modules
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules
    at chunk-25CO2O3J.js?v=e5c47c95:329:9

错误原因 #

你同时引入了预构建的@ckeditor/ckeditor5-build-classic包，以及多个单独的CKEditor插件（如Bold、Italic等），但预构建的ClassicEditor已经内置了这些插件，导致同一模块被重复加载，触发了重复模块错误。

修复方案 #

方案1：直接使用预构建版本（推荐，适合大多数场景） #

预构建的ClassicEditor已经包含了你手动引入的所有插件，无需单独导入，只需直接配置toolbar即可：

修改后的代码：

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

const editorConfiguration = {
    // 只需配置toolbar，无需重复声明plugins
    toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'],
};
const CkEditor = () => {
    return (
        <div>
            <CKEditor editor={ClassicEditor} config={editorConfiguration} />
        </div>
    );
};

export default CkEditor;

方案2：自定义构建编辑器（适合需要添加预构建版本没有的插件场景） #

如果需要使用预构建版本未包含的插件，应该基于核心编辑器包构建自定义编辑器，而不是混用预构建包和单独插件：

1. 先卸载预构建包：

npm uninstall @ckeditor/ckeditor5-build-classic

2. 安装核心编辑器包及所需插件：

npm install @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-autoformat @ckeditor/ckeditor5-basic-styles @ckeditor/ckeditor5-block-quote @ckeditor/ckeditor5-essentials @ckeditor/ckeditor5-heading @ckeditor/ckeditor5-list @ckeditor/ckeditor5-paragraph @ckeditor/ckeditor5-react

3. 修改代码，创建自定义编辑器：

import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';
import { CKEditor } from '@ckeditor/ckeditor5-react';

import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import List from '@ckeditor/ckeditor5-list/src/list';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';

// 自定义编辑器类
class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
    Essentials, Autoformat, Bold, Italic, BlockQuote, Heading, List, Paragraph
];

ClassicEditor.defaultConfig = {
    toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'],
};

const CkEditor = () => {
    return (
        <div>
            <CKEditor editor={ClassicEditor} />
        </div>
    );
};

export default CkEditor;

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