Next.js12中CKEditor报ckeditor-duplicated-modules错误如何解决

ckeditor-duplicated-modules 错误触发的核心是模块重复加载：

• 你使用的预构建版本 @ckeditor/ckeditor5-build-classic 已经默认内置了Paragraph插件
• 你额外引入了独立安装的 @ckeditor/ckeditor5-paragraph 包，两个同源模块版本不一致/重复打包触发冲突
• 官方预构建的编辑器包本身不支持直接追加额外独立插件，所有插件必须和编辑器核心从同一源码树编译才能避免该问题

你当前需求仅需启用Paragraph插件，直接使用预构建版本内置的Paragraph即可，无需额外引入，修正后的代码如下：

import { useEffect, useState, useRef } from "react";

function TextEditor({ token }) {
  const editorRef = useRef();
  const [editorLoaded, setEditorLoaded] = useState(false);
  const { CKEditor, ClassicEditor } = editorRef.current || {};
  const [data, setData] = useState("");

  useEffect(() => {
    editorRef.current = {
      CKEditor: require("@ckeditor/ckeditor5-react").CKEditor,
      ClassicEditor: require("@ckeditor/ckeditor5-build-classic"),
    };
    setEditorLoaded(true);
  }, []);

  return (
    <div className="bg-[#F8F9FA] h-5/7 overflow-y-scroll max-w-6xl mx-auto">
      {editorLoaded ? (
        <CKEditor
          editor={ClassicEditor}
          data=""
          config={{
            // 不需要额外引入Paragraph，已内置，如需禁用其他内置插件可添加removePlugins配置
            removePlugins: ['Heading', 'List', 'Link', 'Image', 'Table', 'MediaEmbed', 'Indent', 'BlockQuote'],
            toolbar: ["bold", "italic"],
          }}
          onReady={(editor) => {
            console.log("Editor is ready to use!", editor);
          }}
          onChange={(event, editor) => {
            const data = editor.getData();
            setData(data);
          }}
        />
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default TextEditor;

额外说明 #

如果需要完全自定义插件组合（比如仅保留Paragraph剔除所有其他内置功能），可以通过CKEditor在线构建工具自定义打包专属编辑器版本，替换掉当前的@ckeditor/ckeditor5-build-classic依赖即可，无需额外引入独立插件包。
同时可以先卸载项目中已经安装的@ckeditor/ckeditor5-paragraph依赖，避免后续再次出现冲突。

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