Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

243
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda