CODEWITHSUNDEEP
javascriptreactjswebstorm
Newman
Newman

Reputation: 73

Element type is invalid | React

I am using WebStorm as my environment. I keep on getting this error every time I try to run the app on the browser:

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

This is my code below.

import React from 'react';
import './App.css';
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Dashboard from './pages/dashboard';
import Deliveries from './pages/deliveries';
import Promotions from './pages/promotions';
import Inventory from './pages/inventory';
import BusinessHours from './pages/business_hours';
import BankAccount from './pages/bank_account';
import Payments from './pages/payments';
import Employees from './pages/employees';
import RequestDelivery from './pages/request_delivery';
import Support from './pages/support';

function App() {
    return (
        <>
            <Router>
                <Navbar />
                <Switch>
                    <Route path='/' exact component={Dashboard} />
                    <Route path='/deliveries' component={Deliveries} />
                    <Route path='/promotions' component={Promotions} />
                    <Route path='/inventory' component={Inventory} />
                    <Route path='/businesshours' component={BusinessHours} />
                    <Route path='/bankaccount' component={BankAccount} />
                    <Route path='/payments' component={Payments} />
                    <Route path='/employees' component={Employees} />
                    <Route path='/requestdelivery' component={RequestDelivery} />
                    <Route path='/support' component={Support} />
                </Switch>
            </Router>
        </>
    );
}

export default App;

enter image description here

Upvotes: 0

Views: 71

Answers (1)

Noah Kanyo
Noah Kanyo

Reputation: 550

Check how you are exporting each component. My guess is you are not exporting all of the components as default, meaning you'd have to wrap your imported component around curly brackets. Another option, you may have forgotten to add export to a component.

Upvotes: 1

Related Questions