0

如标题中所述，我在尝试构建时遇到了错误。

当我在我的机器上运行 npm run 并进行以下修复时，我可以让编辑器正常工作，但是当我尝试构建它时，它会抛出这个错误。

我的代码如下。

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 文件

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;

下面是构建错误。

> 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'
}

环境

  • @editorjs/editorjs 版本：2.22.2
  • react-editor-js 版本：1.10.0

我应该做些什么改变或者我错过了什么？

4

1 回答 1

0

当引用不存在的变量时，ReferenceError 对象表示错误。所以尝试改变Window的类型。

于 2021-10-04T18:07:10.663 回答