Estoy usando CodeMirror para crear un editor en mi sitio web docusaurus, y para usar CodeMirror, debe incluir algunos archivos del paquete en sí, que se ve así:

 import { UnControlled as CodeMirror } from "react-codemirror2"; import "codemirror/lib/codemirror.css"; import "codemirror/mode/javascript/javascript";

El problema es la tercera línea, donde importo el modo Javascript para espejo de código. En ese archivo, hay referencias a las API específicas del navegador ( navigator ), por lo que cuando intento construir el sitio web de Docusaurus, intenta construir estáticamente todo el sitio y falla diciendo

ReferenceError: navigator is not defined

Obviamente, dado que eso no es una cosa en node. El sitio web funciona bien en modo de desarrollo por cierto...

Entonces, lo que quiero hacer es NO cargar este archivo durante la construcción estática del sitio web, sino solo cargar ese archivo en el montaje del componente. Esto es lo que probé:

 useEffect(() => { import("codemirror/mode/javascript/javascript"); }, []);

Eso no funcionó.

¿Cómo puedo cargar este archivo, solo en el navegador y solo una vez que se procesa el componente?

Editar : también intenté usar el <BrowserOnly/> que viene con docusaurus, pero tampoco funcionó, todavía mostraba el mismo error:

 <BrowserOnly> <Repl /> </BrowserOnly>

Resuelto:
Obtuve la respuesta de un comentario de problema de Github :

 import React, { useEffect } from "react"; import { UnControlled as CodeMirror } from "react-codemirror2"; if (typeof window !== "undefined") { require("codemirror/lib/codemirror.css"); require("codemirror/mode/javascript/javascript"); }