FroalaEditorView in Next.js: window is not defined

[elliottsj]

I'm using FroalaEditorView in Next.js, e.g.:

import FroalaEditorView from 'react-froala-wysiwyg/FroalaEditorView';

const MyComponent: React.FC = ({ html }) => {
  return <FroalaEditorView model={html} />;
};

But this results in an error:

ReferenceError: window is not defined
    at Object.<anonymous> (/path/to/node_modules/.pnpm/registry.npmjs.org/react-froala-wysiwyg/[email protected][email protected]/node_modules/react-froala-wysiwyg/FroalaEditorView.js:1:260)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)

This isn't due to the React component itself using any window APIs, but is actually due to the UMD wrapper on the compiled code:

!(function(e, t) {
  'object' == typeof exports && 'object' == typeof module
    ? (module.exports = t(require('react')))
    : 'function' == typeof define && define.amd
    ? define(['react'], t)
    : 'object' == typeof exports
    ? (exports.FroalaEditorView = t(require('react')))
    : (e.FroalaEditorView = t(e.React));
})(window, function(e) {
  return (function(e) {
    var t = {};
    function r(n) {
      if (t[n]) return t[n].exports;
      var o = (t[n] = { i: n, l: !1, exports: {} });
      return e[n].call(o.exports, o, o.exports, r), (o.l = !0), o.exports;
    }
    return (
      (r.m = e),
      (r.c = t),
      (r.d = function(e, t, n) {
        r.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: n });
      }),
      (r.r = function(e) {
        'undefined' != typeof Symbol &&
          Symbol.toStringTag &&
          Object.defineProperty(e, Symbol.toStringTag, { value: 'Module' }),
          Object.defineProperty(e, '__esModule', { value: !0 });
      }),
      (r.t = function(e, t) {
        if ((1 & t && (e = r(e)), 8 & t)) return e;
        if (4 & t && 'object' == typeof e && e && e.__esModule) return e;
        var n = Object.create(null);
        if (
          (r.r(n),
          Object.defineProperty(n, 'default', { enumerable: !0, value: e }),
          2 & t && 'string' != typeof e)
        )
          for (var o in e)
            r.d(
              n,
              o,
              function(t) {
                return e[t];
              }.bind(null, o),
            );
        return n;
      }),
      (r.n = function(e) {
        var t =
          e && e.__esModule
            ? function() {
                return e.default;
              }
            : function() {
                return e;
              };
        return r.d(t, 'a', t), t;
      }),
      (r.o = function(e, t) {
        return Object.prototype.hasOwnProperty.call(e, t);
      }),
      (r.p = ''),
      r((r.s = 13))
    );
  })({
    0: function(t, r) {
      t.exports = e;
    },
    13: function(e, t, r) {
      e.exports = r(14);
    },
    14: function(e, t, r) {
      'use strict';
      Object.defineProperty(t, '__esModule', { value: !0 });
      var n,
        o = (function() {
          function e(e, t) {
            for (var r = 0; r < t.length; r++) {
              var n = t[r];
              (n.enumerable = n.enumerable || !1),
                (n.configurable = !0),
                'value' in n && (n.writable = !0),
                Object.defineProperty(e, n.key, n);
            }
          }
          return function(t, r, n) {
            return r && e(t.prototype, r), n && e(t, n), t;
          };
        })(),
        u = r(0),
        i = (n = u) && n.__esModule ? n : { default: n };
      var f = (function(e) {
        function t(e) {
          !(function(e, t) {
            if (!(e instanceof t)) throw new TypeError('Cannot call a class as a function');
          })(this, t);
          var r = (function(e, t) {
            if (!e)
              throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
            return !t || ('object' != typeof t && 'function' != typeof t) ? e : t;
          })(this, (t.__proto__ || Object.getPrototypeOf(t)).call(this, e));
          return (r.defaultTag = 'div'), r;
        }
        return (
          (function(e, t) {
            if ('function' != typeof t && null !== t)
              throw new TypeError(
                'Super expression must either be null or a function, not ' + typeof t,
              );
            (e.prototype = Object.create(t && t.prototype, {
              constructor: { value: e, enumerable: !1, writable: !0, configurable: !0 },
            })),
              t && (Object.setPrototypeOf ? Object.setPrototypeOf(e, t) : (e.__proto__ = t));
          })(t, i.default.Component),
          o(t, [
            {
              key: 'getTrustedHtml',
              value: function() {
                return { __html: this.props.model };
              },
            },
            {
              key: 'render',
              value: function() {
                return (
                  (this.tag = this.props.tag || this.defaultTag),
                  i.default.createElement(this.tag, {
                    className: 'fr-view',
                    dangerouslySetInnerHTML: this.getTrustedHtml(),
                  })
                );
              },
            },
          ]),
          t
        );
      })();
      t.default = f;
    },
  });
});

Can you please fix your UMD wrapper so it works in a Next.js environment?

[karthik-js]

Any updates on this issue?

[AlexHramovich]

Any updates on this issue?

[nivapo95]

Still waiting for any updates

[JANDA-Developers]

I am temporarily using this...

import dynamic from "next/dynamic";
const FroalaEditorView = dynamic(
    () => import("react-froala-wysiwyg/FroalaEditorView"),
    { ssr: false }
);

interface IProp {
    model: string;
}

export const EditorView: React.FC<IProp> = ({ model }) => {
    if (typeof window === "undefined")
        return <div dangerouslySetInnerHTML={{ __html: model }} />;
    return <FroalaEditorView model={model} />;
};

And this is bad idea because it will create another problem.

[engin-can]

This works for me:

import dynamic from 'next/dynamic';

// This line dynamically imports the Froala Editor component, 
// and sets it to not load on the server (ssr: false)
const FroalaEditor = dynamic(
  () => import('react-froala-wysiwyg'),
  { ssr: false }
);

function MyComponent() {
  const config = {
    // Add your Froala configuration here
  };

  return (
    <div>
      <FroalaEditor config={config} />
    </div>
  );
}

export default MyComponent;

[erknmckr1]

import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

function CreatePost() {
  const [isBrowser, setIsBrowser] = useState(false);

  useEffect(() => {
    setIsBrowser(true);
  }, []);


  const FroalaEditorComponent = dynamic(() => import("react-froala-wysiwyg"), {
    ssr: false,
    loading: () => <p>Yükleniyor...</p>,
  });

  return (
    <div className="xl:w-3/4 w-full h-full p-4">
      <span className="font-semibold text-[30px]">Create Content</span>
      <form className="w-full h-full mt-5">
        {isBrowser && <FroalaEditorComponent />}
      </form>
    </div>
  );
}

export default CreatePost;