窗口未定义-下一个jsssr使用的react-draft-wysiwyg

如何解决窗口未定义-下一个jsssr使用的react-draft-wysiwyg

我正在使用一个富文本编辑器，该文本编辑器用于将纯HTML转换为下一个ssr js的编辑器内容。我得到了未定义此错误窗口的信息，因此我搜索了此github link

的解决方案

它使用了下一个js的动态导入功能。

不是直接导入编辑器import { Editor } from "react-draft-wysiwyg";

它使用此代码动态导入编辑器

const Editor = dynamic(
  () => {
    return import("react-draft-wysiwyg").then(mod => mod.Editor);
  },{ ssr: false }
);

但是尽管我已经安装了react-draft-wysiwyg模块，但仍然出现此错误

ModuleParseError: Module parse Failed: Unexpected token (19:9)
You may need an appropriate loader to handle this file type.
| import dynamic from "next/dynamic";
| var Editor = dynamic(function () {
>   return import("react-draft-wysiwyg").then(function (mod) {
|     return mod.Editor;
|   });

这是我的整个代码

import React,{ Component } from "react";
import { EditorState } from "draft-js";
// import { Editor } from "react-draft-wysiwyg";
import dynamic from "next/dynamic";

const Editor = dynamic(
  () => {
    return import("react-draft-wysiwyg").then(mod => mod.Editor);
  },{ ssr: false }
);

class MyEditor extends Component {
  constructor(props) {
    super(props);
    this.state = { editorState: EditorState.createEmpty() };
  }

  onEditorStateChange = editorState => {
    this.setState({ editorState });
  };

  render() {
    const { editorState } = this.state;

    return (
      <div>
        <Editor
          editorState={editorState}
          wrapperClassName="rich-editor demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange={this.onEditorStateChange}
          placeholder="The message goes here..."
        />
      </div>
    );
  }
}

export default MyEditor;

请帮助我。谢谢。

解决方法

尝试在 React 使用 Editor 钩子更新 DOM 后返回 useEffect。例如：

const [editor,setEditor] = useState<boolean>(false)
  useEffect(() => {
    setEditor(true)
  })

  return (
    <>
      {editor ? (
        <Editor
          editorState={editorState}
          wrapperClassName="rich-editor demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange={this.onEditorStateChange}
          placeholder="The message goes here..."
        />
      ) : null}
    </>
  )