Cannot read property 'apply' of undefined

[aprilmintacpineda]

So I am building a website. When I use a regular browser like google chrome everything works as expected, then I used blisk I got an error saying app.js:14868 Uncaught TypeError: Cannot read property 'apply' of undefined(…) I don't know what's going on but when I looked at line 14868 this is what I saw.

any idea as to how to fixed this?

this is the store that is using the compose function btw.

import {
	compose,
	createStore,
	applyMiddleware
} from 'redux';

import reduxThunk from 'redux-thunk';
import reducers from './reducers';

const store = compose(
	applyMiddleware(reduxThunk),
	window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__()
)(createStore)(reducers);

export default store;

using:

• react/react-dom@15.14.2
• react-redux@5.0.3
• react-router@3.0.2
• redux@3.6.0
• redux-thunk@2.2.0

[TrySound]

@four-eyes-04-04 That's because you should pass to compose only functions. But with falsy redux extension you pass false and compsoe trying to call apply of false.

[markerikson]

We had a "strip out falsy values" check in compose at one point, but it got pulled back out in #2167 .

I'm not sure why there's a difference in behaviors between browsers, but yes, compose expects only actual functions .

[aprilmintacpineda]

It's done, thanks.

[samhh]

Just ran into this error by doing the following:

const devTools = process.env.NODE_ENV === 'development' ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__() : null

const store = createStore(
  rootReducer,
  compose(applyMiddleware(thunk), devTools)
)

Which to me is a lot neater than the alternative I've found of replacing the entire compose function based upon that ternary instead.

Is there a better way to do this?

[markerikson]

You can use this instead:

import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';

[eko3alpha]

I was having this issue as well. @markerikson's solution worked for me. In my case, I'm using both redux-thunk and redux-logger. I replaced "compose" with "composeWithDevTools" and it worked;

import {createStore, applyMiddleware} from 'redux';
import rootReducer from '../reducers/rootReducer';
import thunk from 'redux-thunk';
import {composeWithDevTools} from 'redux-devtools-extension/developmentOnly';
import {createLogger} from 'redux-logger';

const logger = createLogger({
    /* https://github.com/evgenyrodionov/redux-logger */
    collapsed: true,
    diff: true
});

const  configureStore = function (initialState) {
    return createStore(
        rootReducer, 
        initialState, 
        composeWithDevTools(
            /* logger must be the last middleware in chain to log actions */
            applyMiddleware(thunk, logger)  
        )
    );
}

export default configureStore;

[jamjar919]

Had this error when running in a browser without the devtools extension. Fixed once I installed it. Now to make it work without...

[jamjar919]

This is what worked for me (just replace devTools with a simple function onto itself in production)

import { compose, createStore } from 'redux';
import { persistStore, autoRehydrate } from 'redux-persist';
import rootReducer from './reducers';

// eslint-disable-next-line no-underscore-dangle
let devTools = window.__REDUX_DEVTOOLS_EXTENSION__ && 
window.__REDUX_DEVTOOLS_EXTENSION__();
if (process.env.NODE_ENV === 'prod' || process.env.NODE_ENV === 'production') {
    devTools = a => a;
}

const store = createStore(
    rootReducer,
    undefined,
    compose(
      autoRehydrate(),
      devTools,
    ),
);

[johnazre]

I had hit this same error this morning. Yesterday, I was working on my home computer that I had added the redux-devtools extension added to Chrome already, but it turns out that on my work computer, I hadn't added it to Chrome yet. The error went away as soon as I added redux-devtools to the browser.

[nitucassian]

// dev tools middleware
const composeSetup = process.env.NODE_ENV !== 'production' && typeof window === 'object' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose

// store
let store = createStore(
    reducer,
    composeSetup(applyMiddleware(sagaMiddleware))
);

[hiteshsahu]

I commented DEV TOOLS from store and it started working. I work in secure ODC so they dont allow me to install any chrome plugin

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware)
  //  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;

[sebastianovide]

same here. It works also if you comment out applyMiddleware and leave teh devtools

[jaschaio]

For anybody running in the same problem, I got this error because I had the devtools extension disabled in Chrome. Instead of using composeWithDevTools I just re-enabled the redux devtools extension and now it works.