ReferenceError: window is not defined

[vdhoangson]

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?

[ma2ciek]

Hi, @vdhoangson!

Could you describe some steps to reproduce the issue?

Thanks.

[vdhoangson]

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

[ma2ciek]

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

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

[vdhoangson]

aaa.js.zip
my file here

[vdhoangson]

anyone help me?

[pomek]

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.

[vdhoangson]

@pomek can you add my skype?
skype: vdhoangson

[pomek]

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.

[vdhoangson]

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

[pomek]

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.

[vdhoangson]

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

[ma2ciek]

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:

• https://github.com/ckeditor/ckeditor5-react/issues/31
• Disable server side rendering for a given route Hashnode/mern-starter#252

[pomek]

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.

[evenmed]

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} />)})
    }
}

[bipindubey-technoark]

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??

[RyanJeon]

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");
}, []);

[Max-Power-7]

I have same problem in Next.js
¿Have solution?

[sleemkeen]

https://stackoverflow.com/questions/66681320/how-ckeditor-5-works-at-next-js

[Bajrang179]

I am getting the same issue with React version 18 (server side rendering). Can anyone help me with that.

[MathildeJolly]

https://stackoverflow.com/questions/58447134/ckeditor-window-is-not-defined-reactjs-while-implementing/58576912#58576912