Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

242
Views
React: Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

I am trying to build a full-stack application in React, but once I compile my application and try to refresh the React browser page, it gives me the following error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

React tells me to check my render function for my GameComponent.jsx.

Here is the GameComponent.jsx

import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import AuthenticatedRoute from './AuthenticatedRoute.jsx';

import LoginComponent from './LoginComponent.jsx';
import LogoutComponent from './LogoutComponent.jsx';
import WelcomeComponent from './WelcomeComponent.jsx';
import HeaderComponent from './HeaderComponent.jsx';
import FooterComponent from './FooterComponent.jsx';
import ErrorComponent from './ErrorComponent.jsx';

class GameComponent extends Component{
    render(){
        return (
        <div className = "GameComponent">
                <Router>
                    <>
                    <HeaderComponent/>
                    <Switch>
                    <Route path = "/" exact component ={LoginComponent}/>
                    <Route path = "/login" component ={LoginComponent}/>
                    <AuthenticatedRoute path = "/welcome/:name" component ={WelcomeComponent}/>
                    <AuthenticatedRoute path = "/logout" component ={LogoutComponent}/>
                    <Route component = {ErrorComponent}/>
                    </Switch>
                    <FooterComponent/>

                    </>
                </Router>
                
            </div>)
        
    }
}
export default GameComponent;

Here is my App.js:

import GameComponent from './components/GameComponent';
import './bootstrap.css';


function App() {
  return (
    <div className="App">
      <GameComponent/>
    </div>
  );
}

export default App;

I am sorry in advance for the messy code/bad principles, I just started learning. If anyone has any ideas, please share!

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!