I am currently working on integrating EditorJS into my NextJS project. The editor is loading properly without any plugins, with only paragraph as a block option. However, I'm facing an issue when trying to add plugins using the tools prop which results in the following warning being thrown in the console:
editor.js?9336:2 Module Tools was skipped because of TypeError: Cannot read property 'prepare' of undefined
Furthermore, upon clicking on the editor in the browser, another error is thrown:
Uncaught TypeError: Cannot read property 'holder' of undefined
I have tested the editor plugins in a regular React app and they work fine there. This indicates that the problem lies somewhere in the integration between EditorJS and NextJS in handling the plugins. I've tried importing the editor and plugins in the componentDidMount hook using require but encountered the same issue as with dynamic imports in NextJS. I also attempted to access the component using React ref, but it seems that NextJS has some limitations with getting components' refs. Although I tried the suggested workaround, it didn't produce the desired result. It appears that the editor instance is not available until onChange is triggered, preventing plugins from hooking into the editor due to the 'prepare' property or the entire editor being undefined until an event occurs, despite the console output indicating that the editor is ready.
Here's a snippet of my component's code:
import React from "react";
import dynamic from "next/dynamic";
const EditorNoSSR = dynamic(() => import("react-editor-js"), { ssr: false });
const Embed = dynamic(() => import("@editorjs/embed"), { ssr: false });
// Rest of the component code follows...
Is there a viable solution to resolve this issue? While I understand that SSR can be challenging when rendering components that interact with the DOM on the client side, I did include a condition to check if the window object is undefined, yet the issue persists in my scenario.
UPDATE:
I have discovered a potential solution that deviates slightly from the typical NextJS approach but seems to work effectively. This workaround involves creating an instance of EditorJS manually, similar to how it would be done in a standard EditorJS setup.
class Editor extends React.Component {
// Implementation of Editor class continues here...
This alternative implementation has been successful in the context of NextJS.
I will continue refining the code and update it accordingly if I come across a more optimized solution.
UPDATE 2:
The proposed solution by Rising Odegua has proven to be effective.