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

Question

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.

@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. — Rajendra Badri, Jan 07 '19 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 — Hemadri Dasari, Jan 07 '19 at 14:16

score 41 · Answer 1 · answered Jan 07 '19 at 14:08

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.

answered Jan 07 '19 at 14:08

Dávid Molnár

10,673
7
30
55

I have replaced with , so it wokred fine now, but many of them say to use ConnectedRouter Ref: https://www.oreilly.com/library/view/learning-redux/9781786462398/53627206-5feb-431c-bf79-c0d0051cd947.xhtml – Rajendra Badri Jan 08 '19 at 09: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. – Rajendra Badri Jan 08 '19 at 09: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](https://github.com/supasate/connected-react-router#usage) on the project's GitHub page. – Dávid Molnár Jan 08 '19 at 10:37
sure will check. Thanks. @david molnar – Rajendra Badri Jan 09 '19 at 07: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). – Dávid Molnár Jan 09 '19 at 09:49
in my case some imports evaluated to `undefined`, and restarting the development server fixed it – Silly Freak Dec 28 '19 at 16:12
sometimes you just need someone to slap you right across the face; this was helpful for me :D – nbpeth Mar 29 '21 at 21:19
Thank you! You saved me haha. – Chul-ian Aug 04 '21 at 13:59

score 19 · Answer 2 · answered Jul 26 '21 at 19:48

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

answered Jul 26 '21 at 19:48

Harsha

1,568
2
19
22

Thanks! This issue is so stupid... – SurpriseMF Oct 03 '22 at 18:11
it was struggle for a few days. thanks a lot! – Eugene K Jun 06 '23 at 00:44

score 3 · Answer 3 · answered Aug 23 '22 at 10:39

3

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

answered Aug 23 '22 at 10:39

Ahsan Kamran

41
1

score 1 · Answer 4 · answered Sep 13 '21 at 13:37

1

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

answered Sep 13 '21 at 13:37

Mayur Saner

444
5
10

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 '21 at 06:41

score 0 · Answer 5 · answered Jan 27 '23 at 18:35

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.

answered Jan 27 '23 at 18:35

VibrationPositive

301
2
8

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

5 Answers5

Linked