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.
I'm trying to use the component in a Remix app and I'm getting the following error:
Here's how I'm using it:
I guess this could be caused by SSR? However wrapping the component in ClientOnly didn't help.