@Dratannat

Как исправить ошибку «Element type is invalid»?

Пишу веб-приложение, и мне выбивает ошибку. По прочитанным вопросам на stackoverflow я понимаю, что скорее всего проблема в формулировке импортов.
Подскажите, что не так.

Вот ошибка:

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`.


Вот мой файл index.js:

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();

А вот 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;
  • Вопрос задан
  • 2730 просмотров
Пригласить эксперта
Ответы на вопрос 1
CIDBerlin
@CIDBerlin
Junior front-end developer
Кажется, что в index.js не передан компонент App

Да и сам App по хорошему счету должен возвращать что-либо. Пропиши внутрь хотя бы
return (
<div> text </div>
)


Если хочешь +- базовый и рабочий шаблон для react, попробуй create-react-app
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы