D
D
Dratannat2021-05-28 00:54:21
React
Dratannat, 2021-05-28 00:54:21

How to fix "Element type is invalid" error?

I'm writing a web application and I'm getting an error. From reading questions on stackoverflow, I understand that the problem is most likely in the wording of imports.
Tell me what's wrong.

Here is the error:

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.

Check the render method of `App`.


Here is my index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import {render} from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();

And here is App.js:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './containers/Home';
import About from './containers/About';
import Contact from './containers/Contact';
import Listings from './containers/Listings';
import ListingDetail from './containers/ListingDetail';
import Login from './containers/Login';
import SignUp from './containers/SignUp';
import NotFound from './components/NotFound';
import Layout from './hocs/Layout';
import PrivateRoute from './components/privateRoute';

import { Provider } from 'react-redux';
import store from './store';

import './sass/main.scss';

const App = () => (
    <Provider store={store}>
        <Router>
            <Layout>
                <Switch>
                    <Route exact path='/' component={Home} />
                    <Route exact path='/about' component={About} />
                    <Route exact path='/contact' component={Contact} />
                    <Route exact path='/listings' component={Listings} />
                    <PrivateRoute exact path='/listings/:id' component={ListingDetail} />
                    <Route exact path='/login' component={Login} />
                    <Route exact path='/signup' component={SignUp} />
                    <Route component={NotFound} />
                </Switch>
            </Layout>
        </Router>
    </Provider>
);

export default App;

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Anton Polyakov, 2021-05-28
@CIDBerlin

It seems that the App component is not passed to index.js.
And the App itself, in a good way, should return something. Write inside at least

return (
<div> text </div>
)

If you want to +- base and working template for react, try create-react-app

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question