title: Next js: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
body: <p>I'm using <code>next js</code> and I want to import rich text editor in my project, but when I tried to import <code>react-draft-wysiwyg</code> then show me error like this:</p>
  <pre><code>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 (&lt;anonymous&gt;)
      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 (&lt;anonymous&gt;)
      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)
  </code></pre>
  <p>but same editor if I import in <code>create-react-app</code> then it works fine, I don't know why not working in my <code>next js</code> project.</p>
  <p>I have tried code in my <code>next js</code> like this:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { EditorState, convertToRaw } from &quot;draft-js&quot;;
  //import { Editor } from &quot;react-draft-wysiwyg&quot;;
  import dynamic from &quot;next/dynamic&quot;;
  const { Editor } = dynamic(() =&gt; import(&quot;react-draft-wysiwyg&quot;), { ssr: false });
  import draftToHtml from &quot;draftjs-to-html&quot;;
  import &quot;../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css&quot;;
  // import htmlToDraft from &quot;html-to-draftjs&quot;;
  
  const BlogCreate = () =&gt; {
    const [state, setState] = useState({
      editorState: EditorState.createEmpty(),
    });
  
    const onEditorStateChange = (editorState) =&gt; {
      setState({
        editorState,
      });
    };
  
    const { editorState } = state;
    return (
      &lt;div&gt;
        &lt;Editor
          editorState={editorState}
          wrapperClassName=&quot;demo-wrapper&quot;
          editorClassName=&quot;demo-editor&quot;
          onEditorStateChange={onEditorStateChange}
          placeholder=&quot;write something...&quot;
        /&gt;
        &lt;textarea
          disabled
          value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
        /&gt;
      &lt;/div&gt;
    );
  };
  
  export default BlogCreate;
  
  </code></pre>
  <p>Any suggestion please.</p>