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.

Kush

One of your component imports probably isn't correct – Kommunarsk

@Kommunarsk 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. – Kush

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 – Hypersensitive

@hemadri sure will check – Kush

Answer 1

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.

Afb

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/… – Kush

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. – Kush

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. – Calcite

sure will check. Thanks. @david molnar – Kush

If you have found my answer helpful, please mark it as an answer (see the tick symbol next to the answer's body). – Calcite

in my case some imports evaluated to undefined, and restarting the development server fixed it – Septilateral

sometimes you just need someone to slap you right across the face; this was helpful for me :D – Reindeer

Thank you! You saved me haha. – Domestic

Note you can do this in a single console log by logging an object containing the imports i.e. console.log("Imports", { Provider, ConnectedRouter, Route, Switch, Home, Register, CourseManagerDashboard, CourseDetail, App, LoginForm }); – Sufflate

Answer 2

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

Payday

Thanks! This issue is so stupid... – Englut

it was struggle for a few days. thanks a lot! – Donaugh

Answer 3

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

Ventura

Answer 4

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

Stelliform

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. – Upgrade

Answer 5

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.

Giuseppinagiustina