下一个 js：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义

Question

我正在使用next js，我想在我的项目中导入富文本编辑器，但是当我尝试导入react-draft-wysiwyg 时，显示如下错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at C:\Users\alami\OneDrive\Desktop\seo blog\frontend\node_modules\react-dom\cjs\react-dom-server.node.development.js:3736:30
    at ReactDOMServerRenderer.render (C:\Users\alami\OneDrive\Desktop\seo blog\frontend\node_modules\react-dom\cjs\react-dom-server.node.development.js:3739:9)
    at ReactDOMServerRenderer.read (C:\Users\alami\OneDrive\Desktop\seo blog\frontend\node_modules\react-dom\cjs\react-dom-server.node.development.js:3395:29)
    at renderToString (C:\Users\alami\OneDrive\Desktop\seo blog\frontend\node_modules\react-dom\cjs\react-dom-server.node.development.js:3954:27)
    at render (C:\Users\alami\OneDrive\Desktop\seo blog\frontend\node_modules\next-server\dist\server\render.js:79:16)
    at renderPage (C:\Users\alami\OneDrive\Desktop\seo blog\frontend\node_modules\next-server\dist\server\render.js:255:20)
    at C:\Users\alami\OneDrive\Desktop\seo blog\frontend\.next\server\static\development\pages\_document.js:437:17
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\alami\OneDrive\Desktop\seo blog\frontend\.next\server\static\development\pages\_document.js:206:24)
    at _next (C:\Users\alami\OneDrive\Desktop\seo blog\frontend\.next\server\static\development\pages\_document.js:228:9)
    at C:\Users\alami\OneDrive\Desktop\seo blog\frontend\.next\server\static\development\pages\_document.js:235:7
    at new Promise (<anonymous>)
    at new F (C:\Users\alami\OneDrive\Desktop\seo blog\frontend\node_modules\core-js\library\modules\_export.js:36:28)
    at C:\Users\alami\OneDrive\Desktop\seo blog\frontend\.next\server\static\development\pages\_document.js:224:12
    at Function.getInitialProps (C:\Users\alami\OneDrive\Desktop\seo blog\frontend\.next\server\static\development\pages\_document.js:445:7)
    at Object.loadGetInitialProps (C:\Users\alami\OneDrive\Desktop\seo blog\frontend\node_modules\next-server\dist\lib\utils.js:50:35)

但是如果我在create-react-app 中导入相同的编辑器，那么它工作正常，我不知道为什么不在我的next js 项目中工作。

我在next js 中尝试过这样的代码：

import React, { useState } from "react";
import { EditorState, convertToRaw } from "draft-js";
//import { Editor } from "react-draft-wysiwyg";
import dynamic from "next/dynamic";
const { Editor } = dynamic(() => import("react-draft-wysiwyg"), { ssr: false });
import draftToHtml from "draftjs-to-html";
import "../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
// import htmlToDraft from "html-to-draftjs";

const BlogCreate = () => {
  const [state, setState] = useState({
    editorState: EditorState.createEmpty(),
  });

  const onEditorStateChange = (editorState) => {
    setState({
      editorState,
    });
  };

  const { editorState } = state;
  return (
    <div>
      <Editor
        editorState={editorState}
        wrapperClassName="demo-wrapper"
        editorClassName="demo-editor"
        onEditorStateChange={onEditorStateChange}
        placeholder="write something..."
      />
      <textarea
        disabled
        value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
      />
    </div>
  );
};

export default BlogCreate;

请给点建议。

Answer 1

不要解构下一个/动态

改变这一行

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

通过

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