Prerendering Error in build when using CKEditor5 with NextJS

I'm using CKEditor 5 in my NextJS project but can not get it work in npm run build

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

It keep getting error like this:

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

I have tried to make it into a seperate component and dynamic loading, it build fine now but the texteditor now reload/reintialized every action I do.

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