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 33 · Answer 1 · answered Jan 07 '19 at 14:08

33

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

9,032
6
30
48

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 12 · Answer 2 · answered Jul 26 '21 at 19:48

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

score 1 · Answer 3 · 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

420
5
9

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 -2 · Answer 4 · answered Sep 29 '21 at 06:57

-2

delete node_modules and package-lock.json files.
Then run npm install

answered Sep 29 '21 at 06:57

random_18

252
1
15

This is the javascript version of "turn it off and on again", except in most cases this wont actually fix the problem (since the issue is likely in user source, and not packages). – ecnepsnai Jan 06 '22 at 04:59
alright, could you tell me what should be the actual solution for this? @ecnepsnai – random_18 Jan 06 '22 at 08:45

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

4 Answers4

Linked