Next.js 14集成CKEditor 5构建报错：e.createElement is not a function

问题根源 #

这个错误是因为CKEditor依赖浏览器环境API，且内部部分逻辑绑定客户端React渲染机制，但Next.js 14的App Router默认走SSR/SSG流程，服务器端渲染时调用了只在客户端生效的React API，导致不匹配。

具体解决步骤 #

1. 适配Next.js 14的动态导入方案 #

Next.js 14的App Router对客户端组件的要求更严格，先给CKEditor做一层客户端封装：

// components/CKEditorWrapper.jsx
'use client';

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

export default function CKEditorWrapper({ content, onChange }) {
  return (
    <CKEditor
      editor={ClassicEditor}
      data={content}
      onChange={(event, editor) => {
        onChange(editor.getData());
      }}
    />
  );
}

然后在页面组件里用动态导入加载这个封装组件，强制关闭SSR：

// app/editor/page.jsx
import dynamic from 'next/dynamic';
import { useState } from 'react';

const CKEditorWrapper = dynamic(() => import('@/components/CKEditorWrapper'), {
  ssr: false,
  loading: () => <p>加载编辑器中...</p>
});

export default function EditorPage() {
  const [content, setContent] = useState('');

  return (
    <div>
      <h1>编辑器页面</h1>
      <CKEditorWrapper content={content} onChange={setContent} />
    </div>
  );
}

2. 确保版本兼容 #

把CKEditor相关依赖更到最新稳定版，避免版本不匹配问题：

npm install @ckeditor/ckeditor5-react@latest @ckeditor/ckeditor5-build-classic@latest

3. 排查自定义插件（如果有） #

如果你给CKEditor加了自定义插件，检查插件代码里有没有直接调用React.createElement的逻辑，这类代码要包在浏览器环境判断里：

if (typeof window !== 'undefined') {
  // 这里写依赖浏览器的插件逻辑
}

4. 验证修复 #

跑构建命令测试：

npm run build

构建成功后启动生产环境服务确认编辑器正常运行：

npm start

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