React Route v4 and PrivateRoute gives error - React.createElement: type is invalid

Question

Why am I getting this error?

Warning: React.createElement: 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.

My PrivateRoute.js looks like this:

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      (Auth.isUserAuthenticated()) ? (
        <Component {...props} {...rest} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      )
    }
  />
);

export default PrivateRoute;

My import calls are like this:

import HomePage from "../homepage/homepage";
import PrivateRoute from "../../modules/privateRoute";

and I am using it like this:

<PrivateRoute exact path='/' component={HomePage} />

check if `` this component is a valid component. when this `PrivateRoute` Mounts — hannad rehman, Oct 29 '18 at 11:55
console.log(Component); gives undefined. How best to resolve this? — nasaa, Oct 29 '18 at 11:57
There has to be something wrong with how you import/export HomePage, assuming PrivateRoute only has the `'/'` path. If there are other routes using `PrivateRoute` please add them to your question. — c-chavez, Oct 29 '18 at 12:56

score 1 · Answer 1 · answered Oct 29 '18 at 13:13

Seems like you have not exported HomePage component from its respective file. Please ensure that you have exported the component using export keyword.

class HomePage extends React.Component {
    // your class implementation goes here
}
export default HomePage;

Or, you might not have imported the HomePage component, where you should have imported it before passing to PrivateRoute.

import HomePage from '../../path/to/HomePage';
<PrivateRoute exact path='/' component={HomePage} />

React Route v4 and PrivateRoute gives error - React.createElement: type is invalid

1 Answers1