Closed
Description
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 💖