NextJS中EditorJS已加载（SSR:false）但无法显示问题求助

针对你遇到的控制台提示EditorJS就绪但界面不可见的问题，可从以下几个方向排查修复：

1. 修正createReactEditorJS的调用位置 #

不要在组件内部每次渲染时调用createReactEditorJS()，这会导致组件每次重建都创建新的EditorJS实例，引发渲染异常。将其移到组件外部，确保只初始化一次：

修改后的Editor.js：

import { createReactEditorJS } from 'react-editor-js'
import { EditorTools } from './EditorTools'; 
import React from 'react'

// 移至组件外部，仅初始化一次
const ReactEditorJS = createReactEditorJS();

const Editor = () => {
    return (
        <div>
            {/* 移除手动添加的holder元素，react-editor-js会自动创建挂载容器 */}
            <ReactEditorJS tools={EditorTools} />
        </div>
    )
}

export default Editor

2. 确保EditorJS基础样式已导入 #

EditorJS需要基础样式才能正常显示界面，在Editor.js中添加样式导入：

// 导入EditorJS核心样式
import '@editorjs/editorjs/dist/editorjs.min.css';

3. 验证动态导入路径正确性 #

检查Create.js中动态导入的组件路径../../../components/Editor/Editor是否与你的项目文件结构匹配，路径错误会导致组件无法正确加载。

4. 避免StrictMode对初始化的影响 #

NextJS默认启用StrictMode，会导致组件双渲染，可能干扰EditorJS的初始化逻辑。可暂时在next.config.js中关闭StrictMode测试：

module.exports = {
  reactStrictMode: false,
}

如果修复后正常，再考虑用useEffect配合ref来确保EditorJS仅初始化一次。

额外检查：holder元素的正确用法 #

如果你坚持使用手动指定holder的方式，需确保holder元素在ReactEditorJS组件渲染前就存在于DOM中，可通过useRef和useEffect实现：

import { createReactEditorJS } from 'react-editor-js'
import { EditorTools } from './EditorTools'; 
import React, { useRef, useEffect, useState } from 'react'

const ReactEditorJS = createReactEditorJS();

const Editor = () => {
    const editorRef = useRef(null);
    const [editorReady, setEditorReady] = useState(false);

    useEffect(() => {
        if (editorRef.current) {
            setEditorReady(true);
        }
    }, []);

    return (
        <div>
            {editorReady && (
                <ReactEditorJS holder={editorRef.current} tools={EditorTools} />
            )}
            <div ref={editorRef} />
        </div>
    )
}

export default Editor

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