如何在next.js中导入浏览器模块而不进行动态导入[duplicate]

deikduxw  于 2022-12-23  发布在  其他
关注(0)|答案(3)|浏览(122)
    • 此问题在此处已有答案**:

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中使用这个模块而不使用动态导入?

vatpfxk5

vatpfxk51#

看起来问题是highlighter只有客户端代码,不能在带有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>
  );
}
h5qlskok

h5qlskok2#

试试这样的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 />
}
6yt4nkrj

6yt4nkrj3#

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

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

相关问题