Блог

Я использую CodeMirror для создания редактора на моем веб-сайте docusaurus, и чтобы использовать CodeMirror, вы должны включить некоторые файлы из самого пакета, который выглядит следующим образом:

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

Проблема заключается в третьей строке, где я импортирую режим Javascript для code mirror. В этом файле есть ссылки на API-интерфейсы, специфичные для браузера ( navigator ), поэтому, когда я пытаюсь создать веб-сайт Docusaurus, он пытается статически построить весь сайт и выдает ошибку

ReferenceError: navigator is not defined

Очевидно, поскольку в node этого нет. Кстати, веб-сайт отлично работает в режиме разработки…

Итак, что я хочу сделать, это НЕ загружать этот файл во время статического построения веб-сайта, а вместо этого загружать этот файл только при монтировании компонента. Вот что я пробовал:

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

Это не сработало.

Как я могу загрузить этот файл только в браузере и только после рендеринга компонента?

Редактировать: я также пытался использовать <BrowserOnly/> компонент, который поставляется с docusaurus, но это тоже не сработало, он по-прежнему показывал ту же ошибку:

 <BrowserOnly>
  <Repl />
</BrowserOnly>
 

Решаемая:
Я получил ответ из комментария к проблеме на 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");
}