NextJS集成CKEditor5构建预渲染错误及动态加载重初始化问题

1. 构建时预渲染报错 #

执行 npm run build 触发预渲染错误，具体报错信息如下：

Error occurred prerendering page "/user". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: self is not defined
    at 58423 (D:\Capstone Project\petopia\.next\server\chunks\343.js:2:837857)
    at __webpack_require__ (D:\Capstone Project\petopia\.next\server\webpack-runtime.js:1:161)
    at 79793 (D:\Capstone Project\petopia\.next\server\chunks\9793.js:1:213)
    at __webpack_require__ (D:\Capstone Project\petopia\.next\server\webpack-runtime.js:1:161)
    at 46997 (D:\Capstone Project\petopia\.next\server\app\(pages)\user\page.js:1:3035)
    at __webpack_require__ (D:\Capstone Project\petopia\.next\server\webpack-runtime.js:1:161)
    at 15508 (D:\Capstone Project\petopia\.next\server\app\(pages)\user\page.js:1:25642)
    at __webpack_require__ (D:\Capstone Project\petopia\.next\server\webpack-runtime.js:1:161)
    at A (D:\Capstone Project\petopia\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:35:5655)
    at R (D:\Capstone Project\petopia\node_modules\next\dist\compiled\next-server\app-page.runti ✓ Generating static pages (18/18)

> Export encountered errors on following paths:
        /(pages)/(blogs)/blog-create/page: /blog-create
        /(pages)/(blogs)/blog/page: /blog
        /(pages)/user/page: /user

2. CKEditor 实际使用代码 #

<CKEditor
  editor={ClassicEditor as any}
  data={editorData}
  onChange={(event, editor) => {
    const data = editor.getData();
    createBlogForm.setValue('content', data);
    setEditorData(data);
  }}
  config={{
    extraPlugins: [uploadAdapter],
  }}
/>

3. 尝试解决后出现新问题 #

将 CKEditor 封装为独立组件，通过以下方式动态加载后，构建成功，但编辑器每次操作都会重新加载/初始化：

const TextEditor = dynamic(() => import('./TextEditor'), {
  ssr: false,
});

内容的提问来源于stack exchange，提问作者Hùng Nguyễn Minh