Error: element with ID «editorjs» is missing. Pass correct holder's ID.

[Ivaneyko]

Environment

• @editorjs/editorjs version: 2.26.4
• react-editor-js version: 2.1.0
• react version: 18.2.0
• react-dom version: 18.2.0

Code

const EditorInput = forwardRef<any, Props>(({
  label, id = '#', value, onChange, required, error, helperText, margin = 'normal',
  readOnly = false, minHeight = 32
}, ref) => {
  const instanceRef = useRef<any>(null);

  const handleInitialize = useCallback((instance:any) => {
    instanceRef.current = instance;
  }, []);

  const handleChange = async () => {
    const editorData = await instanceRef?.current?.save();

    if ( onChange ) onChange(editorData);
  }

  return (
     <ReactEditorJS
         tools={EDITOR_TOOLS}
         defaultValue={value}
         onInitialize={handleInitialize}
         onChange={handleChange}
         readOnly={readOnly}
         minHeight={minHeight}
         holder="editorjs"
     ><div id="editorjs" /></ReactEditorJS>
  )
});

Describe

Trying with and without custom holder. This happens when you go to the page where it is editor located. When loading a page directly, this does not always happen

[Aldar0K]

I have the same problem

[steebchen]

This happens all the time with NextJS

[gediminastub]

This helps: https://stackoverflow.com/questions/67688118/unhandled-rejection-error-element-with-id-editorjs-is-missing-pass-correct

[orbachar]

same issue here without SSR