(CKEditor) Window is not defined ReactJS While Implementing

Question

I would like to implement CKEditor into my react project. However, I received an error while trying to load it. I have been following all the official documentation. I have no idea why, anyway here is my code

import React from 'react';

class MyEditor extends React.Component {
    state = {loading: true};

    componentDidMount() {
        this.CKEditor = require("@ckeditor/ckeditor5-react");
        this.ClassicEditor = require("@ckeditor/ckeditor5-build-classic");
        this.setState({ loading: false }); 
    }

    render() {
        return ({this.CKEditor && (<this.CKEditor editor={this.ClassicEditor} data="<p>Hello from CKEditor 5!</p>"
                onInit={ 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 } );
                } }/>)})
    }
}

export default MyEditor;

I receive this following error

ReferenceError: window is not defined at Object. (/Users/bobbyjulian/Desktop/project/test/node_modules/ ckeditor/ckeditor5-react/dist/ckeditor.js:5:244 Module._compile internal/modules/cjs/loader.js:778:30 Module._extensions..js internal/modules/cjs/loader.js:789:10 Module.load internal/modules/cjs/loader.js:653:32 tryModuleLoad internal/modules/cjs/loader.js:593:12

I really appreciate any answer. Thank you.

if remix brought you here, export the CKEditor component from a file with extension *.client.tsx to prevent it from getting rendered on the server — stuart
– stuart, Commented Feb 10, 2023 at 1:53

Bill Sourour · Accepted Answer · 2021-05-03 04:15:33Z

31

Here's a working example with NextJS and React Hooks. We can take advantage of useRef to hold on to the Editor instances.

import React, { useState, useEffect, useRef } from 'react'

export default function MyEditor () {
  const editorRef = useRef()
  const [editorLoaded, setEditorLoaded] = useState(false)
  const { CKEditor, ClassicEditor } = editorRef.current || {}

  useEffect(() => {
    editorRef.current = {
      // CKEditor: require('@ckeditor/ckeditor5-react'), // depricated in v3
      CKEditor: require('@ckeditor/ckeditor5-react').CKEditor // v3+
      ClassicEditor: require('@ckeditor/ckeditor5-build-classic')
    }
    setEditorLoaded(true)
  }, [])

  return editorLoaded ? (
    <CKEditor
      editor={ClassicEditor}
      data='<p>Hello from CKEditor 5!</p>'
      onInit={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 })
      }}
    />
  ) : (
    <div>Editor loading</div>
  )
}

From the docs:

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

edited May 3, 2021 at 4:15

answered Oct 27, 2019 at 5:42

Bill Sourour

1,1861 gold badge10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bill Sourour Over a year ago

I ended up making a custom hook for this, which you can find here: gist.github.com/arcdev1/aba0fcea9f618de42ca399e3266f42aa

Taffarel Xavier Over a year ago

Perfect, Bill. =)

omerts Over a year ago

If you are using CKEditor 3.0.0 and above, the default import was removed so change: CKEditor: require('@ckeditor/ckeditor5-react'), Into: CKEditor: require('@ckeditor/ckeditor5-react').CKEditor,

Bill Sourour Over a year ago

Thanks @omerts ... updated the code in my answer to reflect this.

Vaibhav Singh · Accepted Answer · 2019-10-21 06:42:29Z

4

If you are doing server side rendering then you need to load your CKeditor dynamically, because it interacts with the DOM thus, on server since there is no browser it throws this Error.

 class MyEditor extends React.Component {
  state = { loading: true };

  componentDidMount() {
    this.CKEditor = require("@ckeditor/ckeditor5-react");
    this.ClassicEditor = require("@ckeditor/ckeditor5-build-classic");
    this.setState({ loading: false });
  }

  render() {
    return this.CKEditor ? (
      <this.CKEditor
        editor={this.ClassicEditor}
        data="<p>Hello from CKEditor 5!</p>"
        onInit={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 });
        }}
      />
    ) : (
      <div>Editor loading</div>
    );
  }
}

edited Oct 21, 2019 at 6:42

answered Oct 18, 2019 at 8:55

Vaibhav Singh

9627 silver badges20 bronze badges

6 Comments

Raden Bagus Over a year ago

Hi, I have tried your code but I got an error './components/TextEditor.js SyntaxError: /Users/bobbyjulian/Desktop/project/test/components/TextEditor.js: Unexpected token (1:13)' FYI I am doing SSR with NextJs

Vaibhav Singh Over a year ago

can you share the exact code after the change? I think i wrote from as 'form' in the first line. can you recheck that

Raden Bagus Over a year ago

hi, I have edit the code above. Please kindly check it. Thank you

Vaibhav Singh Over a year ago

There is a typo on the imprt it should be from and not form

Raden Bagus Over a year ago

Hi, I have fixed the typo but its still error './components/TextEditor.js SyntaxError: /Users/bobbyjulian/Desktop/project/test/components/TextEditor.js: Unexpected keyword 'this' (13:17)'

|

Him Ho · Accepted Answer · 2021-03-12 17:35:20Z

2

Dynamic import will solve this issue

answered Mar 12, 2021 at 17:35

Him Ho

871 silver badge6 bronze badges

Collectives™ on Stack Overflow

(CKEditor) Window is not defined ReactJS While Implementing

3 Answers 3

4 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related