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

4
  • 2
    One of your component imports probably isn't correct
    – dentemm
    Jan 7, 2019 at 13:56
  • @dentemm thanks for quick reply, I don't see any errors being shown when writing the code on phpstorm editor, but when save the file and see the frontend render on browser I get this error, it shows in editor all imported properly. Jan 7, 2019 at 14:03
  • What ever the components that you created which you imported in the code you shared. Make sure all those components class starts with export default class. It shouldn’t be export class Jan 7, 2019 at 14:16
  • @hemadri sure will check Jan 7, 2019 at 19:28

5 Answers 5

41

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.

8
  • I have replaced <ConnectedRouter history={history}> with <Router history={history}>, so it wokred fine now, but many of them say to use ConnectedRouter Ref: oreilly.com/library/view/learning-redux/9781786462398/… Jan 8, 2019 at 9:41
  • 1
    If I use version "react-router-redux": "^4.0.8", then I have to import ConnectedRouter without curly braces, but when used latest Alpha version then I can call it as {ConnectedRouter}, but even that gives me some other errors when rendering. Jan 8, 2019 at 9:44
  • Please use connected-react-router npm package instead of react-router-redux. Import it with curly braces: import { ConnectedRouter } from 'connected-react-router';. See the usage on the project's GitHub page. Jan 8, 2019 at 10:37
  • sure will check. Thanks. @david molnar Jan 9, 2019 at 7:01
  • 1
    If you have found my answer helpful, please mark it as an answer (see the tick symbol next to the answer's body). Jan 9, 2019 at 9:49
19

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

2
  • Thanks! This issue is so stupid...
    – SurpriseMF
    Oct 3, 2022 at 18:11
  • it was struggle for a few days. thanks a lot!
    – Eugene K
    Jun 6 at 0:44
3

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

1

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

1
  • 1
    I fixed my problem by fixing the import. I found out by uncommenting blocks of code to find out which one causes the error, then check imports for this block.
    – justdvl
    Oct 19, 2021 at 6:41
0

This warning can also come from the opposite. I was using react-charts-2 with nextjs

import { BarChart3 } from "../components/BarChart3";

Adding curly braces got rid of the error.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.