TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
https://www.blocknotejs.org/
Mozilla Public License 2.0
6.78k stars 476 forks source link

Cannot lazily load the editor on the browser #1190

Open d3vr10 opened 1 month ago

d3vr10 commented 1 month ago

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;

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](https://github.com/sponsors/YousefED) and would appreciate if you could look into this sooner than later 💖
thenglong commented 1 week ago

Face the same issue

YousefED commented 1 week ago

Do you still have this with the latest version of BlockNote? If so, could you (or someone else facing this) create a reproducable stackblitz example?