Tengo un proyecto nextjs y tiene un componente react-rte, el componente react-rte se muestra correctamente, pero cuando voy a otro componente y hago clic en el botón Atrás del navegador, aparece el siguiente error:
Unhandled Runtime Error TypeError: r.getEditorState is not a function
Cuando comento el componente react-rte, el error ya no ocurre.
componente de reacción
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;Prueba esto
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; Como mencioné en mi comentario anterior, noté que está importando el paquete react-rte dos veces.
En el useEffect , realiza una importación para inicializar el estado del value , observando el código de ejemplo que se encuentra aquí
Puede lograrlo usando RichTextEditor.createEmptyValue() que proviene del paquete ya importado.
Notará que cambio la importación, no es dinámica, intente eso y si funciona, entonces intente hacer la importación dinámica si eso es lo que necesita.
Puede agregar una condición para verificar el value antes de renderizar 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;Puede verificar la implementación con el ejemplo en vivo y el sandbox