Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

245
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda