Element is not defined error while importing plugins js file

[gondar00]

When i try to import the plugins js file froala-editor/js/plugins.pkgd.min.js i get the error as shown in the attached screenshot

I am using nextjs with ssr

[elliottsj]

This happens because Element is a web API which isn't available on Node.js.

As described in https://github.com/froala/react-froala-wysiwyg/issues/89, you can use Next.js's dynamic helper to execute the module only in the browser:

const FroalaEditor = dynamic(() => import('react-froala-wysiwyg'), {
  ssr: false
});

[gondar00]

@elliottsj the error is being thrown from the plugins file froala-editor/js/plugins.pkgd.min.js

[gondar00]

Dynamically importing the plugins file do not load the plugins (image etc) on the editor

[FaithAdekunle]

I am experiencing this issue as well. Were you able to get past this @gondar00 ?

[dln88]

Hi. I am facing this issue. Does anybody know how to solve this?

[karthik-js]

Please resolve or mention a soultion.

[helencheunggg]

Getting this error, any help? I'm assuming it's because it can't find the editor when the plugin is imported??

EDIT: I was correct. As you used a dynamic helper to import Froala, you'll need to do the same when importing the plugin eg: const Lists = dynamic(import("froala-editor/js/plugins/lists.min.js"));

[elliottsj]

Define your editor component in a separate module and import that one dynamically:

// components/MyFroalaEditor.tsx

import 'froala-editor/js/plugins.pkgd';
import FroalaEditor from 'react-froala-wysiwyg';

const MyFroalaEditor = () => {
  return <FroalaEditor ... />;
};

export default MyFroalaEditor;

// pages/MyPage.tsx

const MyFroalaEditor = dynamic(() => import('../components/MyFroalaEditor'), {
  ssr: false
});