javascript - Next.js：动态导入的组件卡在加载阶段

Question

我在编辑器组件（EditorJS 发现https://github.com/Jungwoo-An/react-editor-js）无法使用 SSR的项目中使用 Next.js。按照 Next 文档，我正在尝试在页面上动态导入我的编辑器组件。当我加载页面时，除了编辑器组件之外的所有组件都会加载。

Components使用Chrome 开发工具中的 React选项卡，它向我显示编辑器组件是一个LoadableComponent卡在加载阶段的组件。

编辑器代码 (Editor.js)

import React from "react";
import axios from 'axios';
import EDITOR_JS_TOOLS from "./editor-constants"
import EditorJs from "react-editor-js"
// const DynamicComponent = dynamic(() => import("react-editor-js").then((mod) => mod.EditorJs) ,{"ssr" : false})
import { API_LINK, getDoc } from "../services"
/* Document editor for a given forum */
export default function Editor(props) {

    /* API call to save current document state */
    async function saveDoc() { 
        const ENDPOINT = API_LINK + "addDoc"
        const savedData = instanceRef.current.save();
        const DATA = { "link": props.link, "doc": savedData }
        const res = await axios.post(ENDPOINT, DATA)
        return res.data;
    }

    const [editorState, setEditorState] = React.useState()
    /* On load, get editor document data */ 
    React.useEffect( async () => {
        const a = await getDoc(props.link).then((res) => {
            setEditorState(res.data)
        })
    }, [])

    const instanceRef = React.useRef(null);
    return (
        <div>
            {/* Save button */}
            <button onClick={saveDoc}>Save!</button>
            {/* Edtor */}
            <EditorJs
                instanceRef={instance => (instanceRef.current = instance)}
                tools={EDITOR_JS_TOOLS}
                i18n={{
                    messages: {}
                }}
                data={editorState}
                enableReInitialize={true}
            />
        </div>
    );
    
};

页面代码 [id.js]

import dynamic from "next/dynamic";
const DynamicComponent = dynamic(() => import('../../components/Editor'), { ssr: false })
import { ForumComments } from '../../components/ForumComments'
import styles from '../../styles/pages/forum.module.css';
import * as React from 'react'
import { useRouter } from 'next/router'


export default function Forum(props) {
    const router = useRouter()
    const { id } = router.query
    if (id == undefined) {
        return (
            <p> Loading ... </p>
        )
    }
    else {
        return (
            <React.Fragment>
                <div className={styles.forumTitle}>
                    <h1> 
                        { /* props.match.params.title */ } 
                        {id}
                    </h1>
                </div>
                <div className={styles.bothSide}>
                    <div className={styles.leftForum}>
                        <ForumComments linkProp={id} />
                    </div>
                    <div className={styles.rightForum}>
                        <DynamicComponent key={"document"} link={id} />
                    </div>
                </div>
            </React.Fragment>
        );
    };
};

这是相关组件的“组件”选项卡的屏幕截图

显示加载状态为可加载组件类型的“组件”选项卡的屏幕截图

标签： javascriptreactjsnext.jseditorjs