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

问题描述

 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 中使用这个模块？

解决方法

试试 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 />
}

问题似乎是荧光笔只有客户端代码，不能在带有 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>
  );
}

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

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

dynamic-import monaco-editor reactjs reactjs