Does not work with next js when tools are added

The solution to use dynamic imports worked for react-editor-js but when I load the tools, it has the same error as in issue before. Please fix this.

https://github.com/Jungwoo-An/react-editor-js/issues/31

Error is TypeError: Cannot read property 'holder' of undefined

Here is my code:

import dynamic from 'next/dynamic';

const EditorJS = dynamic(
  () => import('react-editor-js'),
  { ssr: false }
)
const Header = dynamic(
  () => import('@editorjs/header'),
  { ssr: false }
)
const Embed = dynamic(
  () => import('@editorjs/embed'),
  { ssr: false }
)
const Table = dynamic(
  () => import('@editorjs/table'),
  { ssr: false }
)
const Paragraph = dynamic(
  () => import('@editorjs/paragraph'),
  { ssr: false }
)


const EDITOR_JS_TOOLS = {
  header: Header,
  embed: Embed,
  table: Table,
  paragraph: Paragraph,
}

  useEffect(() => {
    setEditorTools(EDITOR_JS_TOOLS)
  }, []);

and for editor

DOES NOT WORK <EditorJS tools={editorTools}/>

WORKS <EditorJS />

[abhik-b]

@abhik-b Can you share codesandbox or code snippet here. I’m stuck with this issue. It’d of great help. TIA

Hi Rahul, Actually I had another issue when I try to unmount this editor which I could not fix so I did not use this editor at all,

However what I did to fix this issue was

1. create a component(CustomComonent) where I imported the editor and tools
2. inside the page where I want to render the CustomComponent:

import dynamic from "next/dynamic";

export default function Page() {

  const DynamicComponentWithNoSSR = dynamic(
    () => import("../../components/CustomComponent"),
    { ssr: false }
  );

  return (
    <div>
      <DynamicComponentWithNoSSR />
    </div>
  );
}

[hatchli]

Would you please share more working code? The examples you are giving don’t make much sense. Where exactly would you integrate the NoSSR function @Jungwoo-An ? Did you mix it with @StarAzure 's “NOSSRComponent”? If you could possible share a codesandebox of this working with Next.js, I would be eternally grateful.