Redux: Redux compose "TypeError: undefined is not an object (evaluating 'last.apply')"

[igorrfc]

Hey guys. I'm just building the dependencies in a project made with react/redux. And when webpack bundle the main file, the error: "TypeError: undefined is not an object (evaluating 'last.apply')" has been shown on console log.

function compose() {
  for (var _len = arguments.length, funcs = Array(_len), _key = 0; _key < _len; _key++) {
    funcs[_key] = arguments[_key];
  }

  if (funcs.length === 0) {
    return function (arg) {
      return arg;
    };
  }

  if (funcs.length === 1) {
    return funcs[0];
  }

  var last = funcs[funcs.length - 1];
  var rest = funcs.slice(0, -1);
  return function () {
    return rest.reduceRight(function (composed, f) {
      return f(composed);
    }, last.apply(undefined, arguments));
  };
}

Is there any solution for this error?

[markerikson]

That sounds as if you're passing in something invalid when creating your store. Please check your store creation code and verify that the call to compose has valid enhancers as arguments.

[JoeCortopassi]

@igorrfc were you able to figure out steps to reproduce? Wondering if related to this https://github.com/reactjs/redux/pull/2145

[iddan]

In my case caused because of Redux Dev Tools. By passing undefined to compose it generates this error

createStore(
    combineReducers({ auth, missions, artworks, artists }),
    compose(
        applyMiddleware(promiseMiddleware),
        __REDUX_DEVTOOLS_EXTENSION__ && __REDUX_DEVTOOLS_EXTENSION__()
    ),
);

[ballerabdude]

I got this error from safari and I was able to fix it with this.

// Only chrome can handle the redux dev tool
// redux compose cannot handle a null or undefined middleware
if (window.navigator.userAgent.includes('Chrome')) {
  var store = createStore(
    reducer,
    initialState,
    compose(
      applyMiddleware(
        routerMiddleware(browserHistory)
      ),
      window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    )
  );
} else {
  var store = createStore(
    reducer,
    initialState,
    compose(
      applyMiddleware(
        routerMiddleware(browserHistory)
      )
    )
  );
}

[barlog-m]

Fix

const middleware = applyMiddleware(
    routerMiddleware(browserHistory),
    thunkMiddleware,
    authStateMiddleware
);

const composeEnhancers =
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
    rootReducer,
    composeEnhancers(middleware)
);

[notgoodwithpowertools]

The above solution from @ballerabdude worked but the linter complained about store being created twice and a redundant statement. I was able to get this working to remove the linter warnings ...

var getComposeEnhancers = () => {
    if (window.navigator.userAgent.includes('Chrome')) {
      return redux.compose(
        redux.applyMiddleware(thunk)
        ,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
      );
    }
    return redux.compose(redux.applyMiddleware(thunk) );
  };

  var store = redux.createStore(reducers, initialState, getComposeEnhancers() );
  return store;

[WebbizAdmin]

Might help someone in the future...

const createStoreWithMiddleware = createStore(
  rootReducers,
  compose(
    applyMiddleware(thunk, logger),
    window.navigator.userAgent.includes('Chrome') ?
      window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() : compose,
  ),
);

[casvil]

@WebbizAdmin what does compose by itself?

[WebbizAdmin]

@casvil Hey, it allows to apply enhancements to the store, like the devtools above. Nice explenations are Stackoverflow and Redux docs .

I actually changed to this package Redux Dev Tools Extention

import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
....
....
....
const createStoreWithMiddleware = createStore(
  rootReducers,
  composeWithDevTools(applyMiddleware(thunk)),
);

[iMerica]

@Barlog-M's solution worked for me. Thank you!

[alonsoJS]

@barlog-m, this workaround is clean and worked perfect for me, thank you very much