NextJs Ace Editor 窗口未定义

Question

我正在尝试将 react-ace 编辑器添加到我的 nextjs 应用程序中。 ( https://github.com/securingsincity/react-ace )

目前我收到这个错误

Server Error
ReferenceError: window is not defined

This error happened while generating the page. 
Any console logs will be displayed in the terminal window.

这是我的编辑器组件的样子：

import { useState } from "react";
import AceEditor from "react-ace";

// import mode-<language> , this imports the style and colors for the selected language.
import "ace-builds/src-noconflict/mode-javascript";
// there are many themes to import, I liked monokai.
import "ace-builds/src-noconflict/theme-monokai";
// this is an optional import just improved the interaction.
import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/ext-beautify";

const Editor = () => {
  const [code, setCode] = useState(`function hello() {
  console.log("Hello World!");
}`);

  return (
    <AceEditor
      style={{
        height: "50vh",
        width: "100%",
      }}
      placeholder="Start Coding"
      mode="javascript"
      theme="monokai"
      name="basic-code-editor"
      onChange={(currentCode) => setCode(currentCode)}
      fontSize={18}
      showPrintMargin={true}
      showGutter={true}
      highlightActiveLine={true}
      value={code}
      setOptions={{
        enableBasicAutocompletion: true,
        enableLiveAutocompletion: true,
        enableSnippets: true,
        showLineNumbers: true,
        tabSize: 4,
      }}
    />
  );
};

export default Editor;

将 Editor 组件添加到我的布局会返回上述错误。

Answer 1

您需要强制 AceEditor 仅从文档加载到客户端

import dynamic from 'next/dynamic'
const AceEditor= dynamic(() => import('react-ace'),{ ssr: false })