Redux: 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/[email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]

[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;

```javascript
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.

[Bamblehorse]

Had this issue only when testing so to keep devtools in production I did this:

const devtools = process.env.NODE_ENV === 'test'
  ? x => x /* eslint-disable no-underscore-dangle */
  : window.__REDUX_DEVTOOLS_EXTENSION__
      && window.__REDUX_DEVTOOLS_EXTENSION__();
/* eslint-enable no-underscore-dangle */

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(thunk),
    devtools,
  ),
);

[rafaelg33]

@johnazre You saved the day!!! I could not figure out whats wrong until i see that I dint install the redux dev tools.

[smsteel]

Solved this with just spread and ternary operators, maybe someone else will like this approach:

export const createAppStore = (initialState = {}) => {
  const middleware = [
    applyMiddleware(thunkMiddleware),
    ...(window.__REDUX_DEVTOOLS_EXTENSION__ ? [window.__REDUX_DEVTOOLS_EXTENSION__()] : [])
  ]
  const store = createStore(
    rootReducer,
    initialState,
    compose(...middleware)
  )
  return store
}

[kirankumarrr]

Hi, Why will I get this TypeError: Cannot read property 'apply' of undefined: when I open my React-Redux-Firebase project in Chrome Incognito mode?

[jaschaio]

@kirankumarrr this error will always be thrown if you haven't instealled the redux dev tools. You have to explicit allow extension in incognito mode, if not they will be deacti
vated. You can do so in the chrome extensions page for an individual extension:

Or just build in a conditional that falls back to the normal compose method so it works when Redux Dev Tools are not installed:

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
    rootReducer,
    initialState,
    composeEnhancers(
        applyMiddleware( ...middleware ),
    )
);

[aditya745]

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/[email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]

compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
)
);
this will work