Property 'editor' does not exist on type 'never'.

[MaxMcNally]

When using Typescript, the react example gives the error - Property 'editor' does not exist on type 'never'. where ever emailEditorRef.current.editor is referenced. Any ideas of how to fix this?

[driaug]

I have simply TS ignored the error because it is functional code, just has no TS support.

In theory, you could write your own explicit typing to fix the error but the complete lack of documentation makes it nearly impossible...

[akleshsakunia]

I tried adding any as reference type and it worked. So with typescript support on the starter code in readme would look as below

import React, { useRef } from "react";
import { render } from "react-dom";

import EmailEditor from "react-email-editor";

export default () => {
  const emailEditorRef = useRef<any>(null);

  const exportHtml = () => {
    emailEditorRef.current!.editor.exportHtml((data: any) => {
      const { design, html } = data;
      console.log("exportHtml", html);
    });
  };

  const onLoad = () => {
    // editor instance is created
    // you can load your template here;
    // const templateJson = {};
    // emailEditorRef.current.editor.loadDesign(templateJson);
  };

  const onReady = () => {
    // editor is ready
    console.log("onReady");
  };

  return (
    <div>
      <div>
        <button onClick={exportHtml}>Export HTML</button>
      </div>

      <EmailEditor ref={emailEditorRef} onLoad={onLoad} onReady={onReady} />
    </div>
  );
};

[sean-beard]

Try defining the ref like this:

const emailEditorRef = useRef<InstanceType<typeof EmailEditor> | null>(null);

Then using the ref without accessing the editor property will give you intellisense:

[timsun28]

The above given solution doesn't seem to work for me. It seems that the package has been updated last month (10th feb) with types.

I now got this working as follows:

const emailEditorRef = useRef<EditorRef | null>(null);
const exportHtml = () => {
    const reference = emailEditorRef.current;
    if (reference && reference.editor !== null) {
        reference.editor.exportHtml((data) => {
            const { design, html } = data;
            console.log("exportHtml", html);
        });
    }
};

This gives the appropriate types for the data object.

Another weird issue I found in the types is that the onLoad function is marked as depricated. But seeing how it's still in their getting started example, I'm not sure what is going on here.

[lucasbesen]

Please update to the latest version. We have types now.

@timsun28 I have updated the getting started example, you should use onReady instead of onLoad