Cannot read properties of null (reading 'editor')

[fedotxxl]

I've got component which conditionally loads on the page. OnLoad method has following code:

  const onLoad = () => {
    if (props.model) {
      emailEditorRef.current.editor.loadDesign(props.model)
    }

    emailEditorRef.current.editor.addEventListener('design:updated', (e: any) => {
      emailEditorRef.current.editor.exportHtml((data: HtmlExport) => {
        props.handleChange?.({
          json: data.design,
          html: data.html,
        })
      })
    })
  }

When component loads first time it works correctly. On second time I've got an exception: Cannot read properties of null (reading 'editor') in line emailEditorRef.current.editor.addEventListener. I've fixed it by wrapping onLoad in setTimeout.

Can you help with correct solution?

[IamNotHuman]

I have the same problem

[asdfryan]

Could be wrong, but I think this is happening because loadDesign is getting called before editor has been fully rendered.

To avoid this race condition, I think you can use the onReady() prop instead.

[asdfryan]

In fact, I see now that onLoad() was marked as deprecated in https://github.com/unlayer/react-email-editor/commit/1d03c2ee33397825cd3be9d79030a5832278d44c (presumably in favor of onReady()).

Should we go ahead and update the examples?

[lucasbesen]

onReady instead of onLoad should fix your problem