- 此问题在此处已有答案**:
Why am I getting ReferenceError: self is not defined when I import a client-side library?(1个答案)
9个月前关闭.
import Highlighter from "monaco-jsx-highlighter";
在next.js中的这个导入给出了"document not found"错误。所以我尝试动态导入
import dynamic from "next/dynamic";
const Highlighter = dynamic(import("monaco-jsx-highlighter"), { ssr: false });
然而动态导入返回Loadable Component,我检查了next-github,看起来动态导入只对组件有效,但是import Highlighter from "monaco-jsx-highlighter"
.highlighter实际上是一个类,需要初始化为:
const highlighter = new Highlighter()
如何在next.js中使用这个模块而不使用动态导入?
3条答案
按热度按时间vatpfxk51#
看起来问题是highlighter只有客户端代码,不能在带有SSR的服务器上运行。你可以定期将其导入到其他一些组件中,比如
HighlighterWrapper
,然后将HighlighterWrapper
动态导入到你需要它的主组件中,那么它应该可以工作。h5qlskok2#
试试这样的smt.:
/ClientSideComponent.js
:/page.js
:6yt4nkrj3#
我用vanilla动态导入而不是next.js动态导入解决了这个问题。