Estoy usando Editor.js en React (Next.js) y tengo el paquete original, no los envoltorios de terceros para reaccionar.
Por una razón que no sé, ¡está representando/mostrando/produciendo dos codex-editores
en la página! Ambos funcionan correctamente e independientemente.
import EditorJS from "@editorjs/editorjs"; import css from "./removeme.module.scss" // just to see the area; export default function index(params) { const editor = new EditorJS({ holder: "editorjs", }); return ( <> <h1>New Note</h1> <div className={css["editor-area"]} id="editorjs" /> </> ); }
function SafeHydrate({ children }) { return <div suppressHydrationWarning>{typeof window === "undefined" ? null : children}</div>; } function MyApp({ Component, pageProps }) { return ( <SafeHydrate> <Body> <Sidebar items={SidebarLinks} /> <Page> <Component {...pageProps} /> </Page> </Body> </SafeHydrate> ); } export default MyApp;
<SafeHydrate>
y renderizar la página normalmente: sin suerte . (Agregué window
para poder usar la API de Windows y también deshabilitar SSR)id="editorjs"
de <div>
: no aparece nada . La página localhost:3001/notes/editor
solo es accesible si se visita desde el menú de la barra lateral (similar a SPA). Quiero decir, muestra 'la ventana no está definida' si se abre directamente.
¿Qué está causando el problema?
El uso useEffect
resuelve el problema, ya que solo se ejecuta después de la presentación de la página inicial:
export default function index(params) { useEffect(() => { const editor = new EditorJS({ holder: "editorjs", }); }, []); return ( <> <h1>New Note</h1> <div className={css["editor-area"]} id="editorjs" /> </> ); }