React.createElement: type is invalid --expected a string or function

Question

Used react (17.0.1) , react - dom (6.2.1) , react - router - dom (6.2.1) on my Visual Studio Code but getting the following error in the browser console:

Error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of 'App'.

index js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { initContract } from './utils'

window.nearInitPromise = initContract()
  .then(() => {
    ReactDOM.render(
      <App />,
      document.querySelector('#root')
    )
  })
  .catch(console.error)

App js

import 'regenerator-runtime/runtime'
import React from 'react'
import { login, logout } from './utils'
import './global.css'
import 'bootstrap/dist/css/bootstrap.min.css';
import {Container, Navbar, Nav, NavDropdown} from "react-bootstrap";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from './Components/Home'
import NewPoll from './Components/NewPoll'
import PollingStation from './Components/PollingStation'

import getConfig from './config'
const { networkId } = getConfig(process.env.NODE_ENV || 'development')

export default function App() {

return (
<Router>
  <Switch>
    <Route exact path='/'>
      <Home />
    </Route>
    <Route exact path='/PollingStation'>
      <PollingStation />
    </Route>
    <Route exact path='/NewPoll'>
     <NewPoll />
    </Route>
  </Switch>
</Router>
);
}

score 0 · Answer 1 · answered Jan 04 '22 at 19:09

In react-router-dom version 6 the Switch component was replaced by the Routes component, and the routed components should be rendered on the Route component's element prop.

<Router>
  <Routes>
    <Route path='/' element={<Home />} />
    <Route path='/PollingStation' element={<PollingStation />} />
    <Route path='/NewPoll' element={<NewPoll />} />
  </Routes>
</Router>

React.createElement: type is invalid --expected a string or function

1 Answers1