Error: Element type is invalid when using react-router-bootstrap LinkContainer

Question

Using LinkContainer from react-router-bootstrap gives me this Error:

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

Check the render method of Header.

       import React, { Component } from 'react'
        import { Navbar, Nav, Container} from 'react-bootstrap'
        import {LinkContainer}  from 'react-router-bootstrap'
    
    
    class Header extends Component {
     
     render(){
      return (
      <header>
        <Navbar bg="dark" expand="lg" variant="dark" collapseOnSelect>
          <Container>
            <LinkContainer to="/">
            <Navbar.Brand >MyShop</Navbar.Brand>
            </LinkContainer>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">     
              <Nav className="mr-auto">
                <LinkContainer to="/cart">
                  <Nav.Link ><i className="fas fa-shopping-cart"></i>Cart</Nav.Link>
                </LinkContainer>
                <LinkContainer to="/login">
                  <Nav.Link ><i className="fas fa-user"></i>Login</Nav.Link>    
                [enter image description here][1]</LinkContainer>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
      </header>
     )
     }
    }
    
    export default Header

And here is the App.js

import { Container } from 'react-bootstrap'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

import Header from "./components/Header"
import Footer from "./components/Footer"

import HomeScreen from './screens/HomeScreen'
import ProductScreen from './screens/ProductScreen'

function App() {
  return (
    <Router >
      <Header/>
        <main className="py-3">
          <Container>
            <Routes>
              <Route path='/' element={<HomeScreen/>} exact/>
              <Route path="/product/:id" element={<ProductScreen/>}/>
            </Routes>
          </Container>
        </main>
      <Footer/>
    </Router>
  );
}

export default App;

The index.js

import ReactDOM from 'react-dom';
import './index.css';
import './bootstrap.min.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

I have added ane error message screenshot here

Error message screeshot

Thank you!

Answer 1

Please add this line of code at the top of you're index.js code:

import React from "react";