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

编程问答 2022-05-26

问题描述

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

使用 Chrome Dev Tools 中的 React Components 选项卡，它告诉我编辑器组件是一个 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>
        );
    };
};

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

Screenshot from Components tab showing loading state is null of type Loadable Component

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

editorjsjavascriptreactjsreactjsreactjsreactjs