"window is not defined" in NextJS.

[rangicus]

Next Version: 13.5.2 Unlayer Version: 1.7.9

Log:

node_modules/react-email-editor/dist/react-email-editor.cjs.development.js (140:0) @ eval ReferenceError: window is not defined at webpack_require (/opt/noc/.next/server/webpack-runtime.js:33:43) at webpack_require (/opt/noc/.next/server/webpack-runtime.js:33:43) at eval (./app/email/reply/[uuid]/page.tsx:9:76) at (ssr)/./app/email/reply/[uuid]/page.tsx (/opt/noc/.next/server/app/email/reply/[uuid]/page.js:227:1) at __webpack_require__ (/opt/noc/.next/server/webpack-runtime.js:33:43)

Relevant Code:

"use client";

// Imports

import React, { Fragment, useRef, useState } from "react";
import { EditorRef, EmailEditor } from "react-email-editor";

// Main Component

export default function EmailRenderer () {
    // References

    const emailEditorRef = useRef<EditorRef>(null);

    // Rendering

    return (
          <div className="container">
            {/* Response */}
            <h2>Response Builder</h2>
            <Fragment>
              <EmailEditor
                ref={emailEditorRef}
                onReady={(unlayer) => {
                  unlayer.loadDesign({
                  counters: {},
                  body: {
                    id: undefined,
                    rows: [], headers: [], footers: [],
                    values: {
                      backgroundColor: `#ffffff`,
                    },
                  }
                  });
               }}
              />
            </Fragment>
          </div>
    );
}

[arndvs]

I'm having the same issue. Tried backign it down to 1.7.8 and 1.7.7

[awalton3]

I am seeing the same issue. I fixed it by doing a dynamic import (read more here):

const DesignEditor = dynamic( () => { return import("./edit-design-view"); }, { ssr: false } );

But when doing the above code, the save and export functionality of the editor doesn't work :( Any help would be great.

[awalton3]

UPDATE: downgrading to 1.7.7 worked for me. I am using next: 14.0.4

[notrapha]

I had the same issue, editor was not working well with dynamic. I solved it with: https://stackoverflow.com/questions/77020572/correct-way-to-use-forwardref-and-next-dynamic-in-next-js-13-4-for-react-email

const emailEditorRef = useRef<EditorRef | null>(null)

const onReady: EmailEditorProps['onReady'] = (editor) => {
    emailEditorRef.current = { editor }
}

<EmailEditor
    ref={emailEditorRef}
    onLoad={onLoad}
    onReady={onReady}
    minHeight={1024}
    />