search

unlayer / react-email-editor

Drag-n-Drop Email Editor Component for React.js
https://unlayer.com/embed
MIT License
4.51k stars 728 forks source link

TypeError: Cannot read properties of null (reading 'useState') #409

Closed v-mec closed 1 month ago

v-mec commented 1 month ago

I'm trying to use the component in a Remix app and I'm getting the following error:

TypeError: Cannot read properties of null (reading 'useState')
    at Object.useState (/Users/viktor/node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react.development.js:1622:21)
    at /Users/viktor/node_modules/.pnpm/react-email-editor@1.7.11_react@18.3.1/node_modules/react-email-editor/src/EmailEditor.tsx:19:33
    at renderWithHooks (/Users/viktor/code/aftersales-fe/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderForwardRef (/Users/viktor/code/aftersales-fe/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.node.development.js:5919:18)
    at renderElement (/Users/viktor/code/aftersales-fe/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.node.development.js:6082:11)
    at renderNodeDestructiveImpl (/Users/viktor/code/aftersales-fe/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/viktor/code/aftersales-fe/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (/Users/viktor/code/aftersales-fe/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.node.development.js:5852:7)
    at renderElement (/Users/viktor/code/aftersales-fe/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/viktor/code/aftersales-fe/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)

Here's how I'm using it:

import { useRef } from "react";
import { EditorRef, EmailEditor, EmailEditorProps } from "react-email-editor";

export function Editor() {
  const emailEditorRef = useRef<EditorRef>(null);

  const exportHtml = () => {
    const unlayer = emailEditorRef.current?.editor;

    unlayer?.exportHtml((data) => {
      const { design, html } = data;
      console.log("exportHtml", html);
    });
  };

  const onReady: EmailEditorProps["onReady"] = (unlayer) => {
    // editor is ready
    // you can load your template here;
    // the design json can be obtained by calling
    // unlayer.loadDesign(callback) or unlayer.exportHtml(callback)
    // const templateJson = { DESIGN JSON GOES HERE };
    // unlayer.loadDesign(templateJson);
  };

  return <EmailEditor ref={emailEditorRef} onReady={onReady} />;
}

I guess this could be caused by SSR? However wrapping the component in ClientOnly didn't help.