title: Warning: React.createElement: expected a string (for built-in components) or a class/function (for composite components) but got: object
body: <p>I'm a beginner in React and stuck with some problem and got error as :-
  Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
  Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
  I checked with several blogs and implemented their solutions but still getting the same error.</p>
  
  <p><br/>
  <br/></p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>  import React from 'react';
    import ReactDOM from 'react-dom';
  
    import App from './components/App';
  
    ReactDOM.hydrate(
    &lt;App /&gt;,
      document.getElementById('mountNode'),
    );
  </code></pre>
  
  <p><br/>
  <br/></p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { useState } from 'react';
  import { Route, Router,Link } from 'react-router-dom';
  import { createMemoryHistory } from 'history';
  
  
  import HomePage from './HomePage';
  import About from './About';
  export default function App()
  {
  
   const history = createMemoryHistory();
  return (
  
  
      &lt;Router history={history}&gt; 
        {/* A &lt;Switch&gt; looks through its children &lt;Route&gt;s and
            renders the first one that matches the current URL. */}
  
          &lt;Route path="/about" component={About} /&gt;
  
          &lt;Route path="/" component={HomePage} /&gt;
  
      &lt;/Router&gt;
  
  );
  }
  </code></pre>
  
  <p><br/>
  <br/></p>
  
  <p><strong>Error</strong></p>
  
  <pre><code>Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a 
  class/function (for composite components) but got: object.
  Error: Element type is invalid: expected a string (for built-in components) or a class/function (for 
  composite components) but got: object.
      at ReactDOMServerRenderer.render (C:\LMS-APP\node_modules\react-dom\cjs\react-dom- 
     server.node.development.js:3743:17)
      at ReactDOMServerRenderer.read (C:\LMS-APP\node_modules\react-dom\cjs\react-dom- 
     server.node.development.js:3373:29)
      at Object.renderToString (C:\LMS-APP\node_modules\react-dom\cjs\react-dom- 
     server.node.development.js:3988:27)
      at C:\LMS-APP\src\server\/server.js:10:40
      at Layer.handle [as handle_request] (C:\LMS-APP\node_modules\express\lib\router\layer.js:95:5)
      at next (C:\LMS-APP\node_modules\express\lib\router\route.js:137:13)
      at Route.dispatch (C:\LMS-APP\node_modules\express\lib\router\route.js:112:3)
      at Layer.handle [as handle_request] (C:\LMS-APP\node_modules\express\lib\router\layer.js:95:5)
      at C:\LMS-APP\node_modules\express\lib\router\index.js:281:22
      at Function.process_params (C:\LMS-APP\node_modules\express\lib\router\index.js:335:12)
  </code></pre>
  
  <p><br/>
  <br/></p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "LMS-APP",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "dev-server": "nodemon --exec babel-node src/server/server.js --ignore dist/",
      "dev-bundle": "webpack -w -d"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
      "@babel/core": "^7.9.6",
      "@babel/node": "^7.8.7",
      "@babel/preset-env": "^7.9.6",
      "@babel/preset-react": "^7.9.4",
      "babel-loader": "^8.1.0",
      "express": "^4.17.1",
      "react": "^16.13.1",
      "react-dom": "^16.13.1",
      "react-router-dom": "^5.2.0",
      "webpack": "^4.43.0",
      "webpack-cli": "^3.3.11"
    },
    "devDependencies": {
      "babel-eslint": "^10.1.0",
      "eslint": "^7.0.0",
      "eslint-plugin-react": "^7.20.0",
      "eslint-plugin-react-hooks": "^4.0.2",
      "nodemon": "^2.0.4"
    }
  }
  </code></pre>
  
  <p><br/>
  <br/>
  <strong>HomePage.js</strong></p>
  
  <pre><code>import React from 'react-dom';
  import {Link} from 'react-router-dom';
  
  export default function HomePage()
  {
      return(
          &lt;div&gt;
            &lt;nav&gt;
              &lt;ul&gt;
                &lt;li&gt;
                 &lt;Link to="/"&gt;Home&lt;/Link&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;Link to="/about"&gt;About&lt;/Link&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/nav&gt;
           &lt;/div&gt; 
      );
  }
  </code></pre>
  
  <p><br/>
  <br/></p>
  
  <p><strong>server.js</strong></p>
  
  <pre><code>import express from 'express';
  import React from 'react';
  import ReactDOMServer from 'react-dom/server';
  import App from '../components/App';
  import StaticRouter from 'react-router-dom';
  const server = express();
  server.use(express.static('dist'));
  
  server.get('/', (req, res) =&gt; {
    const initialMarkup = ReactDOMServer.renderToString(&lt;StaticRouter&gt;&lt;App /&gt;&lt;/StaticRouter&gt;);
  
    res.send(`
      &lt;html&gt;
        &lt;head&gt;
          &lt;title&gt;Sample React App&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="mountNode"&gt;${initialMarkup}&lt;/div&gt;
      &lt;script src="/main.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
    `)
   });
  
   server.listen(4242, () =&gt; console.log('Server is running...'));
  </code></pre>
  
  <p><br/>
  <br/>
  <strong>About.js</strong></p>
  
  <pre><code>import React from 'react-dom';
  
  export default function About()
  {
      return(
          &lt;div&gt;
              &lt;h1&gt;About&lt;/h1&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>