Redux TypeError: Cannot read property 'apply' of undefined

Question

I have disabled react devtools and redux devtools.

I've been searching for ways to deal with this problem for hours, and most of the problems are in compose while I don't change code at all.

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;

I really don't understand why this happened. I don't change anything and the last thing I do is just do git push origin master to my repository and suddenly when I compiled I got this error:

Iam Using this in my front end :

  "@material-ui/core": "^3.3.1",
    "@material-ui/icons": "^3.0.1",
    "axios": "^0.18.0",
    "jwt-decode": "^2.2.0",
    "prop-types": "^15.6.2",
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "react-redux": "^5.1.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.0.5",
    "react-select": "^2.1.1",
    "recharts": "^1.3.5",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "typeface-roboto": "0.0.54"

Back-end :

 "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.18.3",
    "express": "^4.16.4",
    "mongoose": "^5.3.11",
    "multer": "^1.4.1",
    "passport": "^0.4.0",
    "passport-jwt": "^4.0.0",
    "path": "^0.12.7",
    "validator": "^10.9.0",
    "xlsx": "^0.14.1"
  },
  "devDependencies": {
    "concurrently": "^4.0.1",
    "nodemon": "^1.18.6",
  },

Result Error:

Redux :

Answer 1

Update your redux dev tools from 2.16.0 to 2.16.1

OR

Remove this line from your code

window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()

Answer 2

I had this same issue when I wanted to test my web app on an incognito window (extensions don't show up on incognito windows).

The issue is that compose from redux expects all its arguments to be functions. So when

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 

is evaluated in that environment it returns a boolean.

As @knutwalker mentioned. You'd need to return a function that returns nothing. This fixed it for me,

      window.__REDUX_DEVTOOLS_EXTENSION__
        ? window.__REDUX_DEVTOOLS_EXTENSION__()
        : f => f

Answer 3

The last stack shows a call to compose in client/src/store.js:9 where the second argument is window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__().

If you have the devtools disabled however, __REDUX_DEVTOOLS_EXTENSION__ is undefined and becomes the second argument to compose function. It is still explicitly provided, which is different from it being implicitly undefined by omission, so the compose implementation thinks that there are two valid arguments and expects them to be functions, not undefined.

You should return a dummy function in case there are no devtools available, something like the maybe, though I'm not quite sure what the exact signature must be to satisfy the createStore function.

window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : (a) -> a

Answer 4

For me, I added the redux-devtools extension to Chrome and The error went away as soon as I added redux-devtools to the browser and you don't need to use ternary operator as well.

https://github.com/reduxjs/redux/issues/2359#issuecomment-362340634

Answer 5

The reason for this error is in the question itself. Just enable React and Redux DevTools extension. It worked for me for the same error.

Answer 6

The best way I solved this issue is simple in my case.

You know cypress opens chrome in developer mode, which does not have your extensions including redux devtools.

So, when the window on chrome opens with the error click the menu > more tools > Extensions and go to chrome webstore from to install redux devtools.

Answer 7

i changed

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

to this:

typeof window.__REDUX_DEVTOOLS_EXTENSION__ === "undefined"
? a => a
: window.__REDUX_DEVTOOLS_EXTENSION__ &&
    window.__REDUX_DEVTOOLS_EXTENSION__()

and the problem was solved

Answer 8

I faced a similar issue ,And removing these lines did the trick,

 window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

but it is not a permanent solution as to use redux dev tools again you need these lines. Instead use

process.env.NODE_ENV==="development" ?
       window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() : compose,

it uses env variables to check weather to use Reduxdev tools middleware or not. as i didn't saw this solution in this thread so i posted it hope it'll be useful to somebody..

Answer 9

This error is because of:

const store=createStore(rootreducer,
    initialstate,
    compose(applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
)

While deploying your project you not did this:

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 

While running the command npm run build make sure you remove that.
The correct way is:

const store=createStore(rootreducer,
    initialstate,
    compose(applyMiddleware(...middleware))
)

Answer 10

Make sure that you have downloaded the redux-devtools extension for chrome and change the site access to On all sites or on the specific one by going to Manage Extension > Redux DevTools(details) > Site access

Answer 11

This happened to me with version 2.17.0 of Redux DevTools.

Something got corrupted in the extension.

I just removed the extension from Chome, reinstalled it, and it worked like a charm.

Answer 12

This worked for me:

This error is because of:

const store=createStore(rootreducer,
    initialstate,
    compose(applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
)

While deploying your project remove the last line as follows:

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

While running the command npm run build make sure you remove that. The correct way is:

const store=createStore(rootreducer,
    initialstate,
    compose(applyMiddleware(...middleware))
)

Answer 13

Had the same error in Chrome incognito window. Changed to normal Chrome and all worked fine.

Answer 14

This is a complete answer of @Koop that works for me:

For everyone experiencing the “TypeError: Cannot read property ‘apply’ of undefined” in node_modules/redux/es/redux.js: error: Immediate fix: Install Chrome extension Redux Devtools Permanent fix for all browsers:

1. In the client directory: npm install --save-dev redux-devtools-extension
2. Change client/src/store/index.js to :

---

import { applyMiddleware, createStore, } from ‘redux’;
import createSagaMiddleware from ‘redux-saga’;

import rootReducer from ‘./reducers/index’;
import rootSaga from ‘./sagas/index’;
import { composeWithDevTools } from ‘redux-devtools-extension’;

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(sagaMiddleware))
);
sagaMiddleware.run(rootSaga);
export default store;

Answer 15

In my case this error was causing blank/white screen in production build on mobile browser but not in desktop browser. The accepted answer did not work for me, I had to remove the line, add the devtools extension, and refactor to use the composeWithDevTools import. Which is to say, the answer from @Roman was a full working solution for me (thank you sir). But it may help others to clarify that the problem can occur independent of redux-saga. My app was just using basic redux-thunk. I installed redux-devtools-extension as a dev dependency, then replaced this:

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

const initialState = {};

const middleware = [thunk];

if (nodeEnv !== 'production') {
  const store = createStore(rootReducer, initialState, compose(applyMiddleware(...middleware)));
} else {
  const store = createStore(
    rootReducer,
    initialState,
    compose(
      applyMiddleware(...middleware),
      window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
    ),
  );
}

export default store;

with this:

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

const initialState = {};

const middleware = [thunk];

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

export default store;

And that fixed it.

Answer 16

changing this line

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

to

window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f

will solve the issue and it worked for me to.