react-rte giving TypeError: r.getEditorState is not a function in next js

Question

I have a nextjs project and it has a react-rte component the react-rte component is displayed correctly but when I go to some other component and click back in the browsers back button I get the following error:

Unhandled Runtime Error TypeError: r.getEditorState is not a function

When I comment out the react-rte componnet the error no longer occurs

react-rte component

import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
import PropTypes from "prop-types";
//import the component
const RichTextEditor = dynamic(() => import("react-rte"), { ssr: false });

const MyStatefulEditor = ({ onChange }) => {
  const [value, setValue] = useState([]);
  console.log(value.toString("html"));

  useEffect(() => {
    const importModule = async () => {
      //import module on the client-side to get `createEmptyValue` instead of a component
      const module = await import("react-rte");
      console.log(module);
      setValue(module.createEmptyValue());
    };
    importModule();
  }, []);

  const handleOnChange = (value) => {
    setValue(value);
    if (onChange) {
      onChange(value.toString("html"));
    }
  };

  return <RichTextEditor value={value} onChange={handleOnChange} />;
};

MyStatefulEditor.propTypes = {
  onChange: PropTypes.func,
};

export default MyStatefulEditor;

Answer 1

Try this

import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
import PropTypes from "prop-types";

const RichTextEditor = dynamic(() => import("react-rte"), { ssr: false });


const MyStatefulEditor = ({ onChange }) => {
  const [value, setValue] = useState([]);
  
  useEffect(() => {
    // set the state value using the package available method
    setValue(RichTextEditor.createEmptyValue())
  }, []);

  const handleOnChange = (value) => {
    setValue(value);
    if (onChange) {
      onChange(value.toString("html"));
    }
  };

  return <RichTextEditor value={value} onChange={handleOnChange} />;
};

MyStatefulEditor.propTypes = {
  onChange: PropTypes.func,
};

export default MyStatefulEditor;

Like I mention in my previous comment, I notice you are importing the react-rte package twice.

In the useEffect hook you do an import to initialise the value state, by looking at the example code found here

You can achieve that using RichTextEditor.createEmptyValue() which comes from the already imported package.

You will noticed that I change the import, is not dynamic, try that and if is it works if so then try doing the dynamic import if that is what you need.

Answer 2

You can add a condition to check value before rendering RichTextEditor

import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
import PropTypes from "prop-types";
import { useRouter } from "next/router";
//import the component
const RichTextEditor = dynamic(() => import("react-rte"), { ssr: false });

const MyStatefulEditor = ({ onChange }) => {
  const [value, setValue] = useState();
  const router = useRouter();
  useEffect(() => {
    const importModule = async () => {
      //import module on the client-side to get `createEmptyValue` instead of a component
      const module = await import("react-rte");
      setValue(module.createEmptyValue());
    };
    importModule();
  }, [router.pathname]);

  const handleOnChange = (value) => {
    setValue(value);
    if (onChange) {
      onChange(value.toString("html"));
    }
  };

  //if `value` from react-rte is not generated yet, you should not render `RichTextEditor`
  if (!value) {
    return null;
  }

  return <RichTextEditor value={value} onChange={handleOnChange} />;
};

MyStatefulEditor.propTypes = {
  onChange: PropTypes.func
};

export default MyStatefulEditor;

You can verify the implementation with the live example and the sandbox