Next.js构建react-editor-js出现window is not defined错误如何解决

问题原因 #

EditorJS 本身是纯客户端运行的库，代码中强依赖浏览器window对象，而你在 Next.js 中使用动态导入时开启了服务端渲染配置，导致构建阶段服务端尝试加载 EditorJS 依赖时，因为没有window对象抛出报错。

修改方案 #

只需做1处核心修改，其余代码可保留原有逻辑：

1. 修正CreateBlog组件的动态导入配置

删除你原有写的typeof window !== "undefined"判断，直接将dynamic方法的ssr参数设置为false，完全关闭该组件的服务端渲染逻辑，仅在客户端加载：

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

// 核心修改：去掉window判断，关闭ssr渲染
const EditorJsWithNoSSR = dynamic(() => import("./Rich"), {
    ssr: false,
    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 saveEditorData={this.handleCallback} />         
            </Fragment>
        );
    }
}

export default CreateBlog;

2. Rich.tsx可选优化（一般无需修改，仅极端场景需要）

如果修改后仍有报错，可检查Rich.tsx顶部的导入逻辑，确保所有EditorJS相关的依赖没有被其他服务端渲染的组件直接引用即可。

原理说明 #

Next.js 的dynamic导入设置ssr: false后，该组件会完全跳过服务端构建、渲染流程，仅在用户浏览器加载页面时才会下载执行组件代码，此时window对象已经存在，不会再触发报错。你之前的核心错误就是将ssr参数设为了true，导致构建阶段服务端提前加载了EditorJS依赖。

内容的提问来源于stack exchange，提问作者Sap123