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

Question

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;

Can you please remove most of the code ? Like `` from the Home, and unecessary route and try again ? It's hard to tell why your home is an error with all that code, otherwise, please provide a reproduction — Dimitri Kopriwa, Oct 31 '21 at 22:36
Just tried that and it worked! The renders properly, but when I introduce any of the others, the error persists. Any reason why? — Tom, Oct 31 '21 at 23:14
One of the component rendered within home is wrong, can you try to replug them one by one and found the bad component, then update and add the source so we can tell you ? — Dimitri Kopriwa, Oct 31 '21 at 23:17
Okay I figured it out! I had the components routed to a data page, but the ones that were causing issues had no data in them. I put the data in and it worked! — Tom, Oct 31 '21 at 23:22

score 1 · Accepted Answer · answered Nov 01 '21 at 14:40

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 :

remove code from components
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.

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

1 Answers1