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

问题似乎是highlighter只有客户端代码,无法在带有SSR的服务器上运行。您可以定期将其导入到其他组件中,例如 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>
  );
}

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

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

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