Connected-react-router: Error after upgrade from 6.3.1 to 6.3.2

[gshilin]

After upgrade from 6.3.1 to 6.3.2 I got the following error:

Error: Could not find router reducer in state tree, it must be mounted under "router"

That's not a new project and nothing else changed.

Here is backtrace:

    at Layer.handle_error (/home/gshilin/projects/kmedia-mdb/node_modules/express/lib/router/layer.js:71:5)
    at trim_prefix (/home/gshilin/projects/kmedia-mdb/node_modules/express/lib/router/index.js:315:13)
    at /home/gshilin/projects/kmedia-mdb/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/home/gshilin/projects/kmedia-mdb/node_modules/express/lib/router/index.js:335:12)
    at Immediate.next (/home/gshilin/projects/kmedia-mdb/node_modules/express/lib/router/index.js:275:10)
    at Immediate._onImmediate (/home/gshilin/projects/kmedia-mdb/node_modules/express/lib/router/index.js:635:15)
    at processImmediate (timers.js:640:17)

[ChristianJacobsen]

I get the same error, but only when using SSR.

[dominikbulaj]

Had the same. Downgraded to 6.3.1 and it works. Issue seems to be within reducer's router: connectRouter(history), (returned object's action is undefined)

[adamplabarge]

Have the same issue, tried a variety of versions, nothing seemed to work.

[pinturic]

Did anyone find the problem?

[nhooey]

I had the same problem, and downgrading from 6.4 to 6.3.1 fixed it.

[Danziger]

Make sure you have not defined an initial state for router when calling createStore. That's handled automatically and might cause this issue if location or action are falsy as the check to verify there is a router is:

const isRouter = (value) => value != null &&
    typeof value === 'object' &&
    getIn(value, ['location']) &&
    getIn(value, ['action'])

Where value is state.router.

[ntgnst]

Can someone text here exact solution pls ?

[theodesp]

Make sure you have not defined an initial state for router when calling createStore. How is this going to help when I want to preload a state from localStorage?

[Danziger]

@theodesp Check the rest of my answer. You can define an initial state, but make sure location is not falsy and has the right shape and value.

[gshilin]

@Danziger That fixed this!!! WOW!!!
@supasate Is it possible to fix this check?

[megancooper]

@Danziger apologies but I am a bit unsure what your answer means? I am not sure how an initial state could be defined for router if we are using the connectRouter(history) function to create the reducer? Do you instead mean initialState for the store? if so, how would this affect the reducer?

Could you elaborate on the answer? I am still encountering this issue and I have not defined an initial state for my reducer:

import { combineReducers } from 'redux-immutable';
import { connectRouter } from 'connected-react-router';
import globalReducer from 'containers/App/reducer';

export default (history, injectedReducers) => combineReducers({ // createReducer function
  router: connectRouter(history),
  global: globalReducer,
  ...injectedReducers,
});

configureStore:

  const store = createStore(
    createReducer(history), // defined above
    fromJS(initialState),
    composeEnhancers(applyMiddleware(...middlewares)),
  );

[Danziger]

@megancooper

Do you instead mean initialState for the store? If so, how would this affect the reducer?

Yes, that's what I mean:

Make sure you have not defined an initial state for router when calling createStore.

Just tried it with 6.4.0 and if initialState doesn't have a router entry everything works. However, if I set it to null, { location: { ... } } or anything else I either get the Could not find router reducer in state tree, it must be mounted under "router" error or some other kind of error.

Check lines 6 to 19 here: https://github.com/supasate/connected-react-router/blob/master/src/selectors.js#L6

[dabasov]

@megancooper you possibly use immutable or seamless-immutable maps for reducer tree storage in your project. If so check which import of connected router do you use, it is necessary to use appropriate import for immutable "connected-react-router/immutable" for seamless "connected-react-router/seamless-immutable". If you dive into selectors.js you will find that getIn function implementation depends on it and if you use default import getIn simply handle your tree as plain object. hope it helps

[megancooper]

@dabasov @Danziger thank you! this has helped and my problem is now resolved