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

如何解决下一个 js：元素类型无效：预期为字符串对于内置组件或类/函数对于复合组件但得到：未定义

我正在使用 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;

请提出任何建议。

解决方法

不要解构next/dynamic

改变这一行

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

由

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