importing functional component and getting Element type is invalid

Question

I'm trying to create a simple app and just get a quick mockup to render with some React Bootstrap and React Router.

My Index ( which should be rendering) the app looks like this.

import {render} from "react-dom";
import './index.css';
import App from './App.js';
import {BrowserRouter as Router}  from "react-router-dom";

render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

And App (which is throwing the error as deleting <App /> renders a blank page) looks like this:

import { Link } from 'react-router-dom';
import { Nav, Navbar, NavItem } from "react-bootstrap";
import './App.css';
import Routes from './Routes';

export default function App() {
    return (
      <div className="App container">
        <Navbar fluid collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="/">Home</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
        </Navbar>
        <Routes />
      </div>
    );
}

However I'm getting this error: Error: Element type is invalid. Expected string got undefined

I've tried changing it to class extends component and adjusting how I export it the App component, but am stuck on this one.

Answer 1

I think it means one of the components you're using doesn't actually exists. My bet would be on Navbar.Header since I could not find it in the documentation.

Dropdown.Header is a thing though

Answer 2

I think App component should extend React Component class and import React to make it work. You have to change App.js as

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Nav, Navbar, NavItem } from "react-bootstrap";
import './App.css';
import Routes from './Routes';

export default class App extends Component {
  render() {
    return (
      <div className="App container">
        <Navbar fluid collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="/">Home</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
        </Navbar>
        <Routes />
      </div>
    );
  }
}

For details, check a similar SO Question

Answer 3

Keep REACT in scope for your index Component. import React from 'react. Also As mentioned above in your App component should extend React Component import React, { Component } from 'react';