Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BUG: "Self is not Defined." when running in next.js #389

Closed
PrinOrange opened this issue Jun 11, 2023 · 1 comment
Closed

BUG: "Self is not Defined." when running in next.js #389

PrinOrange opened this issue Jun 11, 2023 · 1 comment
Labels
domain:dx resolution:resolved This issue was already resolved (e.g. by another ticket).

Comments

@PrinOrange
Copy link

My development environment is

  • next.js @18.4.4
  • ckeditor-react @6.0.0
  • Microsoft Edge version 106
  • write the code from documentation example

And here are steps for trigging bug:

  • First, create an next.js app or open an existing next.js project
  • write the code from documentation example
import React from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

const EditorDemo = () => {
  return (
    <div className="App">
      <h2>Using CKEditor 5 build in React</h2>
      <CKEditor
        editor={ClassicEditor}
        data="<p>Hello from CKEditor 5!</p>"
        onReady={(editor) => {
          // You can store the "editor" and use when it is needed.
          console.log("Editor is ready to use!", editor);
        }}
        onChange={(event, editor) => {
          const data = editor.getData();
          console.log({ event, editor, data });
        }}
        onBlur={(event, editor) => {
          console.log("Blur.", editor);
        }}
        onFocus={(event, editor) => {
          console.log("Focus.", editor);
        }}
      />
    </div>
  );
};

export default EditorDemo;

And then, the ckeditor5-react trigged the error like this:

Uncaught ReferenceError: self is not defined
    at Object.<anonymous> (file://E:\zzkpnews\zzkpnews-cms\node_modules\@ckeditor\ckeditor5-react\dist\index.js:5:244)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at @ckeditor/ckeditor5-react (file://E:\zzkpnews\zzkpnews-cms\.next\server\pages\creator.js:112:18)
    at __webpack_require__ (file://E:\zzkpnews\zzkpnews-cms\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./views/creator-publish-article/PublishArticleEditor.tsx:9:83) 

Then the program was crashed and editor can not be rendered and launched correctly.

@Witoso
Copy link
Member

Witoso commented Jun 12, 2023

To use the editor in the next.js setup, you need to unfortunately use a workaround that will disable ssr. Here's an example: ckeditor/ckeditor5#7376 (comment). Most likely this is the cause of the issue.

@Witoso Witoso added pending:feedback This issue is blocked by necessary feedback. domain:dx labels Jun 12, 2023
@Witoso Witoso added resolution:resolved This issue was already resolved (e.g. by another ticket). and removed pending:feedback This issue is blocked by necessary feedback. labels Jul 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
domain:dx resolution:resolved This issue was already resolved (e.g. by another ticket).
Projects
None yet
Development

No branches or pull requests

2 participants