You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

user_3671479 0
Viewed 48964
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import  createHistory  from 'history/createBrowserHistory';
import { Provider } from 'react-redux';
import  ConnectedRouter  from 'react-router-redux';
import { Route, Switch } from 'react-router';
import Home from "./pages/Home";
import Register from "./pages/Register";
import CourseManagerDashboard from "./pages/CourseManagerDashboard";
import CourseDetail from "./pages/CourseDetail";
import App from './app/App';
import LoginForm from './components/LoginForm';

const store = createStore(
    state => state
);
const history = createHistory();

ReactDOM.render((
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <Switch>
                <Route name="home" exact path="/" component={Home} />
                <Route name="register" path="/register" component={Register} />
                <Route name="course-manager-dashboard" path="/course-manager-dashboard" component={CourseManagerDashboard} />
                <Route name="course-detail" path="/course-detail" component={CourseDetail} />
                <Route name="login" path="/login" component={LoginForm} />
                <Route path="/" component={App} />
            </Switch>
        </ConnectedRouter>
    </Provider>
),document.getElementById('app'));

Getting below 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. Unable to track where exactly the issue is.

redux-form react-router react-redux redux reactjs
4 Answers

I know this may sound silly, but try to check all your imported components with a simple console.log:

console.log('Provider', Provider);
console.log('ConnectedRouter', ConnectedRouter);
console.log('Route', Route);
console.log('Switch', Switch);
console.log('Home', Home);
console.log('Register', Register);
console.log('CourseManagerDashboard', CourseManagerDashboard);
console.log('CourseDetail', CourseDetail);
console.log('App', App);
console.log('LoginForm', LoginForm);

Put this before ReactDOM.render, after const history = createHistory();

The line with undefined in it is causing the problem.

user_10935080

In my case, the imports were correct. I just had to remove the braces around the imported class name in the imports section

It used to be

import {DropDownPicker} from 'react-native-dropdown-picker';

I just had to remove the braces around the DropDownPicker

user_62129830

Check your imports and the components that you have used. Make sure any of them is not completely blank.

user_107271550

Just remove the {} (braces) from the component import file.

user_101320960
Related