My unlayer is loaded with { frame: null }

This issue has been tracked since 2022-07-09.

My specifications:

  • React v18.2.0
  • Typescript v4.7.4

Steps to reproduce:

  1. Create a React Redux Typescript application using npx create-react-app my-app --template redux-typescript
  2. Install react-email-editor
  3. Go to src/App.tsx and insert this code:
import React, { useRef } from 'react';
import EmailEditor, { HtmlExport } from 'react-email-editor';

// @ts-ignore
const unlayer: any = window.unlayer

const App = () => {
  const emailEditorRef = useRef(null);
  console.log('👨‍🔧', unlayer)

  const exportHtml = () => {
    // @ts-ignore
    emailEditorRef.current.editor.exportHtml((data: HtmlExport) => {
      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>
  );
};

export default App;
  1. Go to the Developer console and you should see that "window.unlayer" returned a { frame: null }

I have no idea why is this happening, I also tried using Next.js but faced the same issue

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