Renders twice with latest nextjs

This issue has been tracked since 2022-05-10.

The default implementation renders twice using nextjs.

I used this example:
https://github.com/unlayer/react-email-editor

and got this outcome
image

package.json

{
  "name": "polyma",
  "version": "2.0.0",
  "private": true,
  "license": "The Unlicense",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "fauna": "fgu"
  },
  "dependencies": {
    "@apollo/client": "^3.5.10",
    "@nivo/bar": "^0.79.1",
    "@nivo/core": "^0.79.0",
    "@nivo/line": "^0.79.1",
    "@tailwindcss/line-clamp": "^0.4.0",
    "framer-motion": "^6.3.0",
    "graphql": "^16.3.0",
    "next": "12.1.6",
    "react": "^18.0.0",
    "react-dnd": "^16.0.0",
    "react-dnd-html5-backend": "^16.0.0",
    "react-dom": "^18.0.0",
    "react-email-editor": "^1.6.0",
    "react-hook-form": "^7.30.0",
    "react-ranger": "^2.1.0",
    "react-use-copy-to-clipboard": "^1.0.1",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "autoprefixer": "^10.4.4",
    "eslint": "^8.12.0",
    "eslint-config-next": "12.1.6",
    "fauna-gql-upload": "^2.4.3",
    "faunadb": "^4.5.4",
    "postcss": "^8.4.12",
    "sharp": "^0.30.3",
    "tailwind-scrollbar": "^1.3.1",
    "tailwindcss": "^3.0.24",
    "vercel": "^24.1.0"
  }
}

Full code Email.js

import { useRef } from "react";
import dynamic from "next/dynamic";

const EmailEditor = dynamic(() => import("react-email-editor"), {
  ssr: false,
});

export default function Email() {
  const emailEditorRef = useRef(null);

  function saveDesign() {
    emailEditorRef.current.editor.saveDesign((design) => {
      console.log("saveDesign", design);
    });
  }

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

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

  function onReady() {
    // editor is ready
    console.log("onReady");
  }

  return (
    <div className="">
      <div>
        <button onClick={saveDesign}>Save Design</button>
        <button onClick={exportHtml}>Export HTML</button>
      </div>

      <div className="h-screen overflow-hidden">
        <EmailEditor
          ref={emailEditorRef}
          onLoad={onLoad}
          onReady={onReady}
          // works for now, the second email builder gets hidden.
          // minHeight="100vh"
        />
      </div>
    </div>
  );
}
ari-motors-team wrote this answer on 2022-05-17

The iframe is injected twice.
image

furkanmeclis wrote this answer on 2022-05-18

Hello, I was having the same problem in React V18. And I saw that the problem was caused by the fact that Strict Mode causes the element to be rendered twice in React. I solved the problem by removing the StricMode tag in index.js.

root.render(
    <> // Without StrictMode 
     <App />
    </>
);
ari-motors-team wrote this answer on 2022-05-19

Solved it for me.
However, that means there is some legacy code running.
I'll leave it open for now. :)

driaug wrote this answer on 2022-07-13

Having the same issue today, I really feel like turning off StrictMode is not a good workaround though.

For anyone that does not mind this, turning it off does indeed fix the issue.

In case anyone is wondering why turning of StrictMode fixes the issue
https://stackoverflow.com/a/61897567/12035491

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