6

ReferenceError: self is not defined while importing CKEditor. I am using next.js.

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

Already installed using

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
MD Jahid Hasan
  • 786
  • 1
  • 9
  • 19
  • This seems like [an issue with Webpack](https://webpack.js.org/configuration/output/#outputglobalobject) you might have to add [the CKEditor webpack config plugin](https://www.npmjs.com/package/@ckeditor/ckeditor5-dev-webpack-plugin) to [next.js](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config) – Logan Anderson Jun 17 '22 at 12:41
  • You should dynamically import `CKEditor` using [`next/dynamic`](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr) with `ssr: false` to avoid loading it on the server-side, thus preventing the error from occuring. – juliomalves Jun 22 '22 at 20:27

1 Answers1

16

After some trial-and-error I have finally made it work with this setup (NextJS project). No need to alter webpack config. How you handle your input data is up to you.

-MyEditor.jsx

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

const Editor = ({
  value,
  onChange,
}) => {
  return (
    <CKEditor
      editor={ClassicEditor}
      data={value}
      onChange={(event, editor) => {
        const data = editor.getData();
        onChange(data);
      }}
    />
  );
};

export default Editor;

-in any other component:

import dynamic from "next/dynamic";

const MyComp = () => {
   const Editor = dynamic(() => import("./MyEditor"), { ssr: false });
   return (
     <Editor            
        value={"Foo"}
        onChange={(v) => console.log(v)}
     />
)};
Milan Dala
  • 384
  • 2
  • 5