ReferenceError: blocks is not defined

[zacharykatsnelson]

Environment

• @editorjs/editorjs version: "^2.22.2"
• react-editor-js version: "^2.0.6"

Describe

Hello, I have tried to start by running the exact code as specified in the readme. My component simply is this:

import React from 'react';
import { createReactEditorJS } from 'react-editor-js';

const ReactEditorJS = createReactEditorJS();

function Write() {
  return (
    <div>
      <h1>Testing</h1>
      <ReactEditorJS defaultValue={blocks} />
    </div>
  );
}

export default Write;

Yet I am getting this error: Cannot find name 'blocks'

I have no idea what is going wrong. I literally haven't even gone through the first example yet and already am stuck on something. -.-

[zacharykatsnelson]

• another note that could be of interest... If I remove defaultvalue={blocks} I get this error:

Unhandled Runtime Error
Error: element with ID «react-editor-js-17e0f3a8dcd» is missing. Pass correct holder's ID.

UPDATE: Tried doing this:

import React from 'react';
import { createReactEditorJS } from 'react-editor-js';
// @ts-ignore
import Header from '@editorjs/header';

const blocks = [
  {
    type: 'header',
    data: {
      text: 'This is my awesome editor!',
      level: 1,
    },
  },
];

const ReactEditorJS = createReactEditorJS();

function WritePost() {
  return (
    <div>
      <ReactEditorJS defaultValue={blocks} />
    </div>
  );
}

export default WritePost;

And got a slightly similar error, that is:

Unhandled Runtime Error
Error: element with ID «react-editor-js-17e0f7adeb1» is missing. Pass correct holder's ID.

UPDATE 2 Going to sleep now since it's 3am but I was able to (fix? I don't know) make the error go away by essentially disabling SSR and doing

export default dynamic(() => Promise.resolve(WritePost), {
  ssr: false,
});

(Maybe there is a better solution though that doesn't require disabling SSR?)

However, I still am confused about the defaultValue being blocks, and what that means, and would appreciate if that could be explained better in the README.md or in this forum.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Jungwoo-An]

@zacharykatsnelson Hi! First of all, thanks for your interest! 👋

When using SSR (nextjs, ...), Holder prop must be set explicitly.

<ReactEditorJS holder="ssrHolder" />

Thanks!