Error configuring redux-localstorage (Uncaught TypeError: Cannot read property 'length' of undefined)

[Rohithzr]

I am trying to implement redux-localstorage in my reac-redux application and I am facing this issue where I get the error Uncaught TypeError: Cannot read property 'length' of undefined

here is my code:

// import Libraries
import {createStore, applyMiddleware, compose} from "redux";
import {browserHistory} from "react-router";
import {createLogger} from 'redux-logger'
import {syncHistoryWithStore, routerMiddleware} from "react-router-redux";
import createSagaMiddleware from "redux-saga";
import freeze from "redux-freeze";
import persistState from 'redux-localstorage'

// import all Reducers
import {reducers} from "./reducer";

// import all Sagas
import { sagas } from "./sagas";

// define middlewares
let middlewares = [];

// add the router middleware
middlewares.push(routerMiddleware(browserHistory));

// create and add the saga middleware 
const sagaMiddleware = createSagaMiddleware();
middlewares.push(sagaMiddleware); 

//add the freeze and logger dev middleware
if (process.env.NODE_ENV !== 'production') {
    middlewares.push(freeze);
    middlewares.push(createLogger());
}

// apply the middleware
let middleware = applyMiddleware(...middlewares);

// add the redux dev tools
if (process.env.NODE_ENV !== 'production' && window.devToolsExtension) {
    middleware = compose(middleware, window.devToolsExtension());
}

const enhancer = compose(
  middleware,
  persistState("login",{
      key: "my_user"
  })
)

// create global store
const initialState = {};
const store = createStore(reducers, initialState, enhancer);

// Sync history and store, as the react-router-redux reducer
// is under the non-default key ("routing"), selectLocationState
// must be provided for resolving how to retrieve the "route" in the state
const history = syncHistoryWithStore(browserHistory, store);

// expose store to dev window
if (process.env.NODE_ENV !== 'production') {
    window.store = store;
}

// run saga middleware
sagaMiddleware.run(sagas);

// export store and history
export {store, history};

Node and other versions

node v8.1.0

"axios": "^0.16.2",
"react": "^15.6.1",
"react-dom": "^15.4.2",
"react-easy-swipe": "0.0.13",
"react-redux": "^5.0.2",
"react-router": "^3.0.1",
"react-router-bootstrap": "^0.23.1",
"react-router-redux": "^4.0.7",
"react-touch": "^0.4.2",
"redux": "^3.6.0",
"redux-form": "^6.4.3",
"redux-localstorage": "^0.4.1",
"redux-logger": "^3.0.6",
"redux-persist": "^4.8.0",
"redux-saga": "^0.14.3"

[Rohithzr]

if I go to node_modules/redux-localstorage/persistState.js and add some console.log()s here:

return function (next) {
    return function (reducer, initialState, enhancer) {
      console.log("-----------------------------")
      console.log("After calling createStore()")
      console.log("reducer", reducer);
      console.log("initialState", initialState);
      console.log("enhancer", enhancer);
      console.log("-----------------------------")
      if (typeof initialState === 'function' && typeof enhancer === 'undefined') {
        enhancer = initialState;
        initialState = undefined;
      }

[Rohithzr]

I figured it out as incompability issue with redux chrome extension. I am trying to figure out the problem now.

[dankelleher]

Confirmed I have the same issue. "Fixed" by adding the persistState enhancer before the chrome extension in the composedEnhancers list.