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

Question

 import Highlighter from "monaco-jsx-highlighter";

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

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

但是，动态导入会返回可加载的组件。我检查了next-github，看起来动态导入只对组件有效。但是import Highlighter from "monaco-jsx-highlighter"。荧光笔实际上是一个类，需要初始化为：

const highlighter = new Highlighter()

如何在没有动态导入的情况下在next.js中使用此模块？

Answer 1

试试smt吧。如下所示：

/ClientSideComponent.js

import Highlighter from "monaco-jsx-highlighter";

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

/page.js

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

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

Answer 2

我用普通的动态导入而不是next.js动态导入解决了这个问题。

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

Answer 3

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

import Highlighter from "monaco-jsx-highlighter";

export const HighligherWrapper = (props) => {
  // Make instance here or outside
  const highlighter = useMemo(() => new Highlighter(),[]);  

  // Do whatever you want here with highlighter instance

  return <div>Something</div>;
}

export default HighligherWrapper;

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>
  );
}