Ckeditor5-react: ReferenceError: window is not defined

Created on 10 Sep 2018 · 17Comments · Source: ckeditor/ckeditor5-react

ReferenceError: window is not defined
    at Object.<anonymous> (/my_path/node_modules/@ckeditor/ckeditor5-react/dist/webpack:/CKEditor/webpack/universalModuleDefinition:10:2)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/son/Nodejs/dustgo/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/son/Nodejs/dustgo/client/modules/Blog/Post/pages/Admin/Edit.js:10:1)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at loader (/Users/son/Nodejs/dustgo/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/son/Nodejs/dustgo/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)

How to fix it please?

duplicate

Source

vdhoangson

Most helpful comment

I ran into this same issue when trying to use Next.js with Server-Side Rendering and CKEditor.

Here's how I fixed it in case it helps anyone:

import React form 'react';

class MyComponent extends React.Component {
    state = {isServer: true};

    componentDidMount() {
        // SSR doesn't fire ComponentDidMount, so we import CKEditor inside of it and store it as a component prop
        this.CKEditor = require("@ckeditor/ckeditor5-react");
        this.ClassicEditor = require("@ckeditor/ckeditor5-build-classic");
        this.setState({ isServer: false }); // We just do this to toggle a re-render
    }

    render() {
        return ({this.CKEditor && (<this.CKEditor editor={this.ClassicEditor} />)})
    }
}

evenmed on 18 Oct 2019

👍17 🎉6 👎3

All 17 comments

Hi, @vdhoangson!

Could you describe some steps to reproduce the issue?

Thanks.

ma2ciek on 10 Sep 2018

I have an article creation page

When I click the link to this page, it works fine

It only failed when I refreshed the page

vdhoangson on 10 Sep 2018

Please, describe the setup, how you load the component, etc.

Without some details, it's impossible to reproduce it.

ma2ciek on 10 Sep 2018

aaa.js.zip
my file here

vdhoangson on 10 Sep 2018

anyone help me?

vdhoangson on 11 Sep 2018

We ask you about steps to reproduce. You attached some file instead. What could we do with it? We need more details (e.g. webpack configuration, node & npm version, etc.).

Would be good if you create a repository with a minimal setup that allows reproducing the issue.

pomek on 11 Sep 2018

@pomek can you add my skype?
skype: vdhoangson

vdhoangson on 11 Sep 2018

I guess you don't want to share with us your project. And I understand it. That's the reason why we're asking about steps and/or a minimal set-up for reproducing the issue.

We're asking because as you said:

It only failed when I refreshed the page

That's weird and it does not sound like an error of CKEditor itself.

Answering your question - because you reported the issue here, we would like to help you here. If we resolve your problem, other developers could also resolve their issues in the future based on our messages.

pomek on 11 Sep 2018

I using mern stack http://mern.io/

https://github.com/Hashnode/mern-starter

And webpack config like this. Not edit anything

I was installed ckeditor-react base on document, it work when i click a tag to go to editor page, but when i refresh editor page, it show error

vdhoangson on 11 Sep 2018

Before I go deeper into the details of MERN, I would like to ask you about the last thing - which version of React do you use? You can check this in node_modules/ or by typing React.version in the dev-tool console.

pomek on 11 Sep 2018

thanks @pomek
now i'm using react v16.4.2

vdhoangson on 11 Sep 2018

Ok, I've checked it (http://mern.io/documentation.html) and it looks like it's using server-side rendering (which we do not support as our editor directly touches the DOM) You need to use some dynamic require to check if the component is rendered by the browser or by the server.

Related problems:

ma2ciek on 11 Sep 2018

The case described in the ticket is about missing window object when the component is rendering on the server (SSR). A very similar ticket is here https://github.com/ckeditor/ckeditor5-react/issues/31 so I'm closing this as a DUP.

pomek on 19 Sep 2018

I ran into this same issue when trying to use Next.js with Server-Side Rendering and CKEditor.

Here's how I fixed it in case it helps anyone:

import React form 'react';

class MyComponent extends React.Component {
    state = {isServer: true};

    componentDidMount() {
        // SSR doesn't fire ComponentDidMount, so we import CKEditor inside of it and store it as a component prop
        this.CKEditor = require("@ckeditor/ckeditor5-react");
        this.ClassicEditor = require("@ckeditor/ckeditor5-build-classic");
        this.setState({ isServer: false }); // We just do this to toggle a re-render
    }

    render() {
        return ({this.CKEditor && (<this.CKEditor editor={this.ClassicEditor} />)})
    }
}

evenmed on 18 Oct 2019

👍17 🎉6 👎3

I ran into this same issue when trying to use Next.js with Server-Side Rendering and CKEditor.

Here's how I fixed it in case it helps anyone:

import React form 'react';

class MyComponent extends React.Component {
    state = {isServer: true};

    componentDidMount() {
        // SSR doesn't fire ComponentDidMount, so we import CKEditor inside of it and store it as a component prop
        this.CKEditor = require("@ckeditor/ckeditor5-react");
        this.ClassicEditor = require("@ckeditor/ckeditor5-build-classic");
        this.setState({ isServer: false }); // We just do this to toggle a re-render
    }

    render() {
        return ({this.CKEditor && (<this.CKEditor editor={this.ClassicEditor} />)})
    }
}

How to use this in functional component??

bipindubey-technoark on 28 Oct 2020

I ran into this same issue when trying to use Next.js with Server-Side Rendering and CKEditor.
Here's how I fixed it in case it helps anyone:

import React form 'react';

class MyComponent extends React.Component {
    state = {isServer: true};

    componentDidMount() {
        // SSR doesn't fire ComponentDidMount, so we import CKEditor inside of it and store it as a component prop
        this.CKEditor = require("@ckeditor/ckeditor5-react");
        this.ClassicEditor = require("@ckeditor/ckeditor5-build-classic");
        this.setState({ isServer: false }); // We just do this to toggle a re-render
    }

    render() {
        return ({this.CKEditor && (<this.CKEditor editor={this.ClassicEditor} />)})
    }
}

How to use this in functional component??

This worked for me using hooks

let CKEditor;
let ClassicEditor;

useEffect(() => {
  CKEditor = require("@ckeditor/ckeditor5-react");
  ClassicEditor = require("@ckeditor/ckeditor5-build-classic");
}, []);