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

Question

I'm trying to create a simple page in react with some router, I get the following error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. APP.JS

import React, {Component} from 'react';
import {Route, BrowserRouter as Router, Switch, Link } from "react-router-dom"
import Contact from "./Contact"
import Tournoi from "./Tournoi"
import Home from "./Home"
import {NavigationBar} from "./components/NavigationBar"

class App extends Component{ 
render(){
  return (
    <React.Framgent> 
    <NavigationBar/> 
    <Router> 
    <Switch>
    <Route exact path="/" component={Home}/>
    <Route path="/Contact" component={Contact}/>
    <Route path="/Tournoi" component={Tournoi}/>
    </Switch>
    </Router>
    </React.Framgent>
  );
  }
}

export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.

serviceWorker.unregister();

Answer 1

My component NavigationBar is not export by default howewer my other pages are

Navigation Bar

import React from 'react'
import {Nav,Navbar} from 'react-bootstrap';
import styled from "styled-components";
const Styles = styled.div `
.navbar {
    background-color: #222;
}
.navbar-brand .navbar-nav .nav-link{
    color:#bbb;
    &hover{
        color:white;
    }
}
`;
export const NavigationBar = () => (
<Styles>
    <Navbar expand="lg">
        <Navbar.Brand href="/"></Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav"/>
        <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="m1-auto">
                <Nav.Item><Nav.Link href="/">Home</Nav.Link> </Nav.Item>
                <Nav.Item><Nav.Link href="/Contact">Contact</Nav.Link> </Nav.Item>
                <Nav.Item><Nav.Link href="/Tournoi">Tournoi</Nav.Link> </Nav.Item>
            </Nav>
        </Navbar.Collapse>
    </Navbar>
</Styles>
)

My Pages structures is terribly simple

import React from 'react';

export default function Home (){
    return(
        <div className="Bannière1">
            <h1>Bienvenue vous êtes sur la page d'accueil</h1>
            <button> Créer un tournoi </button> <button>Voir notre générateur de Bracket</button>
            
            </div>
    )
}

Answer 2

You are probably using a version of React that did not yet have StrictMode . It was introduced in React version 16.3 . React is complaining because React.StrictMode is returning undefined instead of the an actual component. To confirm this, check the version of React in your package.json file.