React18集成CKEditor5在线构建器自定义构建失败报错排查

我在React 18应用中使用CKEditor5在线构建工具生成的自定义构建包渲染编辑器，按要求将下载的CKEditor5文件夹放到项目根目录后，编辑器无法渲染，控制台抛出以下错误：

ckeditor.tsx:156  TypeError: Cannot read properties of undefined (reading 'create')
    at to._createEditor (ckeditor.tsx:169:1)
    at Vr._creator (ckeditor.tsx:133:1)
    at editorwatchdog.js:115:1
    at async to._initializeEditor (ckeditor.tsx:151:1)
    at async to.componentDidMount (ckeditor.tsx:102:1) 

以下是我在React组件中的集成代码：

import { CKEditor } from '@ckeditor/ckeditor5-react'
import { Editor } from 'ckeditor5-custom-build/build/ckeditor';


const DashboardPage = () => {
  return (
    <>
      <div className='card'>
        <div className='card-body'>

          {/* begin::Editor */}
          <div className='mx-auto'>
            <CKEditor
              editor={Editor}
              data="<p>Hello from CKEditor 5!</p>"
              onReady={editor => {
                // You can store the "editor" and use when it is needed.
                console.log('Editor is ready to use!', editor);
              }}
              onChange={(event, editor) => {
                // const data = editor.getData();
                // console.log({ event, editor, data });
              }}
              onBlur={(event, editor) => {
                console.log('Blur.', editor);
              }}
              onFocus={(event, editor) => {
                console.log('Focus.', editor);
              }
              }
            />
            {/* end::Editor */}
          </div>
        </div>
      </div>
    </>
  )
}

项目中使用的CKEditor相关版本：

"@ckeditor/ckeditor5-build-balloon": "^38.0.1",
"@ckeditor/ckeditor5-react": "^6.0.0",
"ckeditor5-custom-build": "file:./ckeditor5",

注意：使用CKEditor5官方预构建的classic、balloon版本时，编辑器可以正常渲染。请问问题出在哪里？

解决方案 #

• 修正导入方式：CKEditor5在线构建工具生成的自定义包默认是默认导出，而非命名导出。你当前使用的import { Editor } from ...会导致Editor为undefined，触发报错。修改导入语句为：

  import { CKEditor } from '@ckeditor/ckeditor5-react'
  import Editor from 'ckeditor5-custom-build/build/ckeditor'; // 移除花括号
  

• 验证自定义构建的导出格式：打开ckeditor5-custom-build/build/ckeditor.js，确认导出为默认导出，示例如下：

  export default ClassicEditor; // 或你选择的编辑器类型，如BalloonEditor
  

• 对齐版本兼容性：@ckeditor/ckeditor5-react@6.x要求CKEditor5核心版本为^37.0.0及以上，需确保自定义构建包的版本与预构建包（38.0.1）一致。可查看自定义包的package.json中的version字段，若版本不匹配，重新通过在线构建工具生成对应版本的包。

• 重新安装依赖：修改导入后，删除node_modules和锁文件，重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

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