window not defined build error on react-editor-js

Question

As mentioned in title I'm facing the error when I'm trying to build.

When I run npm run on my machine with below fix, I get the editor working, but when I'm trying to build it is throwing me that error.

My code is as follows.

import React, { Fragment, PureComponent } from "react";
import dynamic from 'next/dynamic'
import { renderEditorJsObject } from "./renderEditorJs";

let EditorJsWithNoSSR;
if (typeof window !== "undefined") {
    EditorJsWithNoSSR = dynamic(() => import("./Rich"), {
        ssr: true,
        loading: () => <p>loading editor.js ...</p>,
    });
}

type ICreateBlogProps = {
}

type ICreateBlogState = {
    preview: any,
}

class CreateBlog extends PureComponent<ICreateBlogProps, ICreateBlogState> {
    constructor(props: ICreateBlogProps) {
        super(props)
    }

    state: ICreateBlogState = {
        preview: "",
    }

    componentDidMount() {
        const lozad = require('lozad')
        const observer = lozad('.homepage-banner')
        observer.observe()

    }

    handleCallback = (data) => {
        //callback code
    }

    render() {
        return (
            <Fragment>
              {EditorJsWithNoSSR && <EditorJsWithNoSSR saveEditorData={this.handleCallback} />}         
            </Fragment>
        );
    }
}

export default CreateBlog;

Rich.tsx file

const ReactEditor = ({ saveEditorData }) => {
    const instanceRef = React.useRef(null);

    async function handleSave() {
        const savedData = await instanceRef.current.save();
        saveEditorData(savedData);
    }

    return (
        <React.Fragment>
            <EditorJs
                instanceRef={instance => (instanceRef.current = instance)}
                tools={EDITOR_JS_TOOLS}
                i18n={{
                    messages: {}
                }}
            />
            <div className="flex justify-center">
                <button onClick={handleSave} className="h-12 px-6 m-2 text-lg text-indigo-100 transition-colors duration-150 bg-yellow-700 rounded-lg focus:shadow-outline hover:bg-indigo-800">Preview</button>
            </div>
        </React.Fragment>
    );
};


export default ReactEditor;

And below is the build error.

> Build error occurred
ReferenceError: window is not defined
    at Object.<anonymous> (D:\trekproject-UI\trekproject-blog\node_modules\@editorjs\editorjs\dist\editor.js:4:7)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at D:\trekproject-UI\trekproject-blog\node_modules\react-editor-js\dist\react-editor-js.umd.js:2:111
    at Object.<anonymous> (D:\trekproject-UI\trekproject-blog\node_modules\react-editor-js\dist\react-editor-js.umd.js:5:2)
    at Module._compile (internal/modules/cjs/loader.js:1085:14) {
  type: 'ReferenceError'
}

Environment

• @editorjs/editorjs version: 2.22.2
• react-editor-js version: 1.10.0

What changes should I make or am I missing something?

Answer 1

The ReferenceError object represents an error when a non-existent variable is referenced. So try to change the type of Window.