Reactjs 在没有动态导入的情况下，如何在next.js中导入浏览器模块

在next.js中导入时出现“未找到文档”错误。所以我尝试动态导入

 import Highlighter from "monaco-jsx-highlighter";

然而，动态导入返回可加载组件。我检查了下一个github，看起来动态导入只适用于组件。但是

从“摩纳哥jsx荧光灯”导入荧光灯
。Highlighter实际上是一个类，需要初始化为：

import dynamic from "next/dynamic";
const Highlighter = dynamic(import("monaco-jsx-highlighter"), { ssr: false });

如果没有动态导入，如何在next.js中使用此模块？
试试smt。像这样：

/ClientSideComponent.js
：

const highlighter = new Highlighter()

import Highlighter from "monaco-jsx-highlighter";

export default function ClientSideComponent(props){
    // Write here the Highlighter logic.
    return <>Highlighter</>;
}

问题似乎是highlighter只有客户端代码，不能在带有SSR的服务器上运行。您可以定期将其导入其他组件，如
highlighterrapper
，然后将
highlighterrapper
动态导入到您需要它的主组件中，然后它就可以工作了

import dynamic from "next/dynamic";
const ClientSideComponent = dynamic(()=> import("./ClientSideComponent.js"), { ssr: false });

function Page(props) {
    return <ClientSideComponent />
}

从“摩纳哥jsx荧光灯”导入荧光灯；
导出常量HighligherWrapper=（道具）=>{
//在这里或外面举例说明
const highlighter=usemo（（）=>new highlighter（），[]）；
//在highlighter实例中，您可以随心所欲
归还某物；
}
导出默认的HighligherWrapper；

从“下一个/动态”导入动态；
const HighligherWrapper=dynamic（（）=>import（“./HighligherWrapper”），{ssr:false}）；
常数页（）{
//现在您可以在代码中使用它，它不会破坏SSR
返回(
);
}
我用vanilla动态导入而不是next.js动态导入解决了这个问题

import dynamic from "next/dynamic";

const HighligherWrapper = dynamic(()=> import("./HighligherWrapper"), { ssr: false });

const Page() {
  // Now you can use it in your code and it won't break SSR
  return (
    <div>
      <HighligherWrapper />
    </div>
  );
}

什么是未找到的
文档
错误？您能在这里发布吗？服务器错误引用错误：未定义文档生成页面时发生此错误。任何控制台日志都将显示在终端窗口中。调用Stack insertStyleElement file:/home/tesla/Documents/projects/portfolio/client/node_modules/monaco jsx highlighter/dist/webpack:/monaco jsx highlighter/node_modules/style loader/dist/runtime/injectStylesIntoStyleTag.js（93:15）@Danila，因为存在挂起的编辑，我不能编辑这个问题。问题似乎是highlighter是客户端唯一的组件，不能在带有SSR的服务器上运行。您可以定期将其导入其他组件，如
highlighterrapper
，然后将
highlighterrapper
动态导入到您需要的主组件中，它应该可以工作。@Danila Highlighter是一个类。我如何在HighlighterRapper中导入它？
dynamic
仅适用于组件。这意味着什么？@Peter这意味着，您导入的模块应该是组件。但是在这种情况下，Highlighter是一个类，所以动态导入不起作用。然后创建一个独立的
组件
，编写Highlighter应该如何工作的业务逻辑，并将该
组件
动态导入当前页面。秒，我正在更新我的答案
import dynamic from "next/dynamic";

const HighligherWrapper = dynamic(()=> import("./HighligherWrapper"), { ssr: false });

const Page() {
  // Now you can use it in your code and it won't break SSR
  return (
    <div>
      <HighligherWrapper />
    </div>
  );
}

let jsxHighlighter = null;
import("monaco-jsx-highlighter").then((allMonacoSyntaxHighlighter) => {
  jsxHighlighter = allMonacoSyntaxHighlighter.default;
});