ReferenceError: self is not defined / Next.js app router setup issue

[rocalex]

When I use this component in my next app, I got the following error.

- error node_modules/@ckeditor/ckeditor5-react/dist/index.js (5:242) @ eval
- error ReferenceError: self is not defined
    at __webpack_require__ (/Volumes/DATA/SourceCode/barren/frontend/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/ContentEditor.tsx:7:83)
    at Module.(sc_client)/./src/components/ContentEditor.tsx (/Volumes/DATA/SourceCode/barren/frontend/.next/server/app/events/create/online/page.js:3103:1)
    at __webpack_require__ (/Volumes/DATA/SourceCode/barren/frontend/.next/server/webpack-runtime.js:33:43)
    at eval (./src/app/events/create/EventCreateForm.tsx:12:83)
    at Module.(sc_client)/./src/app/events/create/EventCreateForm.tsx (/Volumes/DATA/SourceCode/barren/frontend/.next/server/app/events/create/online/page.js:3092:1)
    at __webpack_require__ (/Volumes/DATA/SourceCode/barren/frontend/.next/server/webpack-runtime.js:33:43)
null

Next.js: 13.4.3 ckeditor5-react 6.0.0

[martnpaneq]

Hi @rocalex,

Unfortunately this is not enough information for us to understand your issue. Could you please provide us with some reproduction steps so that we can investigate the issue?

[kcs-vishnumahindalekar]

Hi @rocalex, @martnpaneq

Can you find a solution on that how to remove this error please let me know I am also stuck on that

[Witoso]

It's extremely hard to pinpoint the issue with such little info. From what I can tell, CKEditor 5 needs to use the import in the next setup.dynamic import in the Next setup. There's an example provided by the community member.

[PeterJSung]

@Witoso hello. as i know above link is target for under 13 version of nextjs. after next13.4 there is split server & client component. but, in this case next 13.4 with app router has get Error below code.

import 'client-only';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';

const HTMLEditor = () => {
  return (
    <CKEditor
      editor={ClassicEditor}
      onChange={(event: any, text: any) => {
        console.log(event, text);
      }}
    />
  );
};

[PeterJSung]

@rocalex hello. finally i found the way not to make error in app router of nextjs.

'use client'
export default function EditorPage() {
  const [Component, setComponent] = useState<JSX.Element>();

  useEffect(() => {
    async function loadModule() {
      const ClassicEditor = await import('@ckeditor/ckeditor5-build-classic');
      const { CKEditor } = await import('@ckeditor/ckeditor5-react');
      setComponent(
        <CKEditor
          data={'test'}
          editor={ClassicEditor.default}
          onChange={console.log}
        />
      );
    }
    void loadModule();
  }, []);

  return Component;
}

it looks like fine.

[Witoso]

Thanks for sharing your example, @PeterJSung!

[PeterJSung]

@Witoso hello witoso, This error seems to be caused by ckeditor not running the next app router. Do you have any future support plans? Also, when I searched, there doesn't seem to be any place where self is used in both ckeditor-react and ckeditor, so I'm not sure why an error saying self is not defined occurs. https://github.com/search?q=repo%3Ackeditor%2Fckeditor5+self+language%3AJavaScript&type=code&l=JavaScript&p=1 https://github.com/search?q=repo%3Ackeditor%2Fckeditor5-react%20self&type=code https://github.com/search?q=repo%3Ackeditor%2Fckeditor5+self+language%3ATypeScript+&type=code&p=1

[Witoso]

We do have plans to investigate it, but most likely it requires some changes to how the editor is packaged, so it's not a quick fix. This error most likely references some global object like window. Which may be problematic in SSR environments.

[PeterJSung]

thanks. maybe some of plugin has same error. until ckeditor support ssr, ill use lazy load.

[Witoso]

Cross-linking to ckeditor/ckeditor5#7376.