React Element Type is Invalid, why am I getting this error and how do I solve it?

I get the following error when trying to run my react site:

“Error: 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.

Check the render method of Home.”

After reviewing [this] React.createElement: type is invalid — expected a string and [this]Check the render method I still am lost in how to fix the problem. Here is a screenshot of the console

Code: Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

reportWebVitals(console.log);

App.js

import React from 'react';
import GlobalStyle from './globalStyles';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Navbar from './components/Navbar/Navbar';

//Pages
import Home from './pages/Home';
import SignUp from './pages/SignupPage';
import Login from './pages/LoginPage';
import Devs from './pages/Devs';
import Whitepaper from './pages/Whitepaper';
import Token from './pages/Token';
import Footer from './components/Footer/Footer';

function App() {
    return (
        <Router>
            <GlobalStyle />
            <Navbar />
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/signup" exact component={SignUp} />
                <Route path="/devs" exact component={Devs} />
                <Route path="/login" exact component={Login} />
                <Route path="/whitepaper" exact component={Whitepaper} />
                <Route path="/token" exact component={Token} />
            </Switch>
            <Footer />
        </Router>
    );
}

export default App;

Home.js

import React from 'react';
import {Content} from '../components/Content/Content';
import Features from '../components/Features/Features';
import Hero from '../components/Hero/Hero';
import { heroOne, heroTwo, heroThree } from '../data/HeroData';

// Hero Feature Content Carousel

const Home = () => {
    return (
        <>
            <Hero />
            <Features />
            <Content {...heroOne} />
            <Content {...heroTwo} />
            <Content {...heroThree} />
        </>
    );
};

export default Home;

Answer

When getting started with ReactJS programming, it is common that junior developers write mistakes and break the rendering.

Most of the time, check their component sources exports (named/default), check their integration and simplify their render method.

The best way to do is to fix the rendering until you find the breaking point :

1. remove code from components
2. reduce the amount of rendered components

The more you clean your code and simplify it, the easiest it will be to get a successful render.

This will help you locate the bad component and fix it. When you are done, just use git revert and apply your fix.