React-router: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

[xgzl87]

Test Case

Steps to reproduce

Create a new app
npm install -g create-react-app
create-react-app react-router-params
cd react-router-params/

Install react router
Install react redux
npm install react-router-dom@next

Paste in example lifted directly from docs

Run it
npm start

Expected Behavior

Actual Behavior
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of Route.

[timdorr]

If you're getting that error, you're not passing a correct component to the component prop. Make sure you're exporting the right thing.

[stereobooster]

Getting the same error. I basically took example from readme of react-router-redux (+ create-react-app):

// @flow

import React from "react";
import ReactDOM from "react-dom";

import { createStore, combineReducers, applyMiddleware } from "redux";
import { Provider } from "react-redux";

import createHistory from "history/createBrowserHistory";
import { Route } from "react-router";

import {
  ConnectedRouter,
  routerReducer,
  routerMiddleware,
  push
} from "react-router-redux";

// import reducers from './reducers' // Or wherever you keep your reducers

// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory();

// Build the middleware for intercepting and dispatching navigation actions
const middleware = routerMiddleware(history);

// Add the reducer to your store on the `router` key
// Also apply our middleware for navigating
const store = createStore(
  combineReducers({
    // ...reducers,
    router: routerReducer
  }),
  applyMiddleware(middleware)
);

const root = document.getElementById("root");

if (root === undefined || root === null) {
  throw new Error("There is no root");
}

ReactDOM.render(
  <Provider store={store}>
    {/* ConnectedRouter will use the store from Provider automatically */}
    <ConnectedRouter history={history}>
      <div>
        <Route path="/" render={() => <div>Home</div>} />
      </div>
    </ConnectedRouter>
  </Provider>,
  root
);

[stereobooster]

Here is reproducible demo https://github.com/stereobooster/react-router-redux-example

[stereobooster]

Issue happened because I used "react-router-redux": "^4.0.8", instead of "react-router-redux": "^5.0.0-alpha.9",. I wonder why create-react-app doesn't warn about undefined imports

[catalsdevelop]

I use "react-router-redux": "^4.0.8", same error. Change version to "react-router-redux": "^5.0.0-alpha.9", then it's fine

[ryota-murakami]

I also encountered exactly the same error as @stereobooster and @catalsdevelop
and solved it by changing the version of react-router-redux to "react-router-redux": "^5.0.0-alpha.9".

[wildcherrycandy]

Same issue with "react-router-redux": "^4.0.8".
Fixed by "react-router-redux": "^5.0.0-alpha.9" version.