Skip to content

Cannot lazily load the editor on the browser #1190

Closed
@d3vr10

Description

@d3vr10

Describe the bug
Cannot lazily load (dynamic()-ally import) the editor on the browser because of the following error:

TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')
    at http://localhost:3000/_next/static/chunks/node_modules_%40blocknote_react_dist_blocknote-react_55c838.js:323:20
    at Eo (http://localhost:3000/_next/static/chunks/node_modules_%40blocknote_react_dist_blocknote-react_55c838.js:724:6)
    at [project]/node_modules/@blocknote/react/dist/blocknote-react.js [app-client] (ecmascript) (http://localhost:3000/_next/static/chunks/node_modules_%40blocknote_react_dist_blocknote-react_55c838.js:726:91)
    at http://localhost:3000/_next/static/chunks/_fee5ad._.js:693:27
    at runModuleExecutionHooks (http://localhost:3000/_next/static/chunks/_fee5ad._.js:738:9)
    at instantiateModule (http://localhost:3000/_next/static/chunks/_fee5ad._.js:691:9)
    at getOrInstantiateModuleFromParent (http://localhost:3000/_next/static/chunks/_fee5ad._.js:624:12)
    at esmImport (http://localhost:3000/_next/static/chunks/_fee5ad._.js:142:20)
    at [project]/src/components/article/editor/BlocksToHTMLPresentation.tsx [app-client] (ecmascript) (http://localhost:3000/_next/static/chunks/src_components_article_editor_BlocksToHTMLPresentation_tsx_0ce445._.js:13:173)
    at http://localhost:3000/_next/static/chunks/_fee5ad._.js:693:27
    at runModuleExecutionHooks (http://localhost:3000/_next/static/chunks/_fee5ad._.js:738:9)
    at instantiateModule (http://localhost:3000/_next/static/chunks/_fee5ad._.js:691:9)
    at getOrInstantiateModuleFromParent (http://localhost:3000/_next/static/chunks/_fee5ad._.js:624:12)
    at esmImport (http://localhost:3000/_next/static/chunks/_fee5ad._.js:142:20)
    at http://localhost:3000/_next/static/chunks/src_components_article_editor_BlocksToHTMLPresentation_tsx_7254cc._.js:22:16

To Reproduce
Create a client component:

"use client";
import {useCreateBlockNote} from "@blocknote/react";
import {useEffect, useState} from "react";

const BlocksToHTMLPresentation: React.FC<{ content?: string | null }> = ({content}) => {
    const editor = useCreateBlockNote({
        initialContent: content? JSON.parse(content) : undefined
    })
    const [html, setHtml] = useState<null | string>(null)
    useEffect(() => {
        (async function () {
           const html = await editor.blocksToHTMLLossy(editor.document)
           setHtml(html)
        })()
    }, []);
    if (!html)
        return <p>Loading...</p>
    return <div dangerouslySetInnerHTML={{__html: html}}></div>
}

export default BlocksToHTMLPresentation;
  • Create a client component to contain the above container: (It has to be client because as of nextjs 15 it's the only type allowed to make dynamic imports)
"use client";

import dynamic from "next/dynamic";

export default function BlocksToHTMLContainer({content}: { content?: string | null }) {

    const BlocksToHTMLPresentation = dynamic(() =>
            import("@/components/article/editor/BlocksToHTMLPresentation"),
        {ssr: false}
    );
    return <BlocksToHTMLPresentation content={content}/>
}
  • Place the container into a server component's markup

Misc

  • Nextjs version: 15.0.1
  • React version: 19
  • Node version: 20.15.0
  • Package manager: npm
  • Browser: 10.7.0
  • I'm a sponsor and would appreciate if you could look into this sooner than later 💖

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions