Cannot read properties of null (reading 'editor')

This issue has been tracked since 2021-12-03.

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 wrote this answer on 2021-12-28

I have the same problem

asdfryan wrote this answer on 2022-02-23

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 wrote this answer on 2022-02-23

In fact, I see now that onLoad() was marked as deprecated in 1d03c2e (presumably in favor of onReady()).

Should we go ahead and update the examples?

lucasbesen wrote this answer on 2022-03-24

onReady instead of onLoad should fix your problem

More Details About Repo
Owner Name unlayer
Repo Name react-email-editor
Full Name unlayer/react-email-editor
Language JavaScript
Created Date 2017-10-01
Updated Date 2022-12-05
Star Count 3598
Watcher Count 48
Fork Count 627
Issue Count 163

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date