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 :

score 64 · Accepted Answer · answered Nov 28 '18 at 11:07

64

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__()

answered Nov 28 '18 at 11:07

Sultan Aslam

5,600
2
38
44

Why did it happen? – Nov 28 '18 at 11:14
1

Was an issue with the new v2.16.0 release of redux-devtools-extension. But now fix in v2.16.1 – Sultan Aslam Nov 28 '18 at 11:23

score 46 · Answer 2 · answered Apr 27 '19 at 15:16

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

worked for me. In my case, app crashed when i opened localhost on Opera browser (where i didn't have installed redux devtools). In chrome it worked propperly as I have the extension. Thanks! — ProblemsEverywhere, Jun 06 '19 at 20:16

score 12 · Answer 3 · answered Nov 28 '18 at 10:08

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

I have turned off react devtools and redux devtools and the results is still the same — , Nov 28 '18 at 11:01

score 4 · Answer 4 · answered May 12 '19 at 06:48

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

answered May 12 '19 at 06:48

webdeveloper086

361
2
3

users dont have the extension. it won't work on their browser. What is the solution? – Shehan DMG May 12 '23 at 08:18

score 3 · Answer 5 · answered Jun 04 '19 at 14:01

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.

score 3 · Answer 6 · answered Sep 11 '19 at 15:13

3

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.

answered Sep 11 '19 at 15:13

Surya

971
2
17
30

score 3 · Answer 7 · answered Nov 04 '21 at 08:43

Before Error:

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;

After remove error:

In Store.js we have to remove

window.REDUX_DEVTOOLS_EXTENSION && window.REDUX_DEVTOOLS_EXTENSION()

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

export default store;

score 2 · Answer 8 · answered Oct 25 '20 at 14:43

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

score 2 · Answer 9 · answered Jul 09 '21 at 06:59

2

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.

answered Jul 09 '21 at 06:59

Avinesh Pandey

31
3

Mukesh · Answer 10 · 2021-04-27T16:17:54.340

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))
)

score 1 · Answer 11 · answered Oct 16 '20 at 14:55

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

score 1 · Answer 12 · answered Mar 17 '21 at 13:03

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.

score 0 · Answer 13 · answered Dec 04 '19 at 10:06

0

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

answered Dec 04 '19 at 10:06

Harshit

88
1
7

score 0 · Answer 14 · answered Feb 11 '20 at 07:01

0

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.

answered Feb 11 '20 at 07:01

YEG

473
4
12

score 0 · Answer 15 · edited Jan 11 '21 at 17:49

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))
)

score 0 · Answer 16 · answered Feb 28 '21 at 07:52

0

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

answered Feb 28 '21 at 07:52

Allen

1
1

score 0 · Answer 17 · answered Mar 03 '21 at 22:29

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:

In the client directory: npm install --save-dev redux-devtools-extension
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;

Ritesh Jagga · Answer 18 · 2022-08-19T19:05:32.230

For answers saying to remove the following line of code

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

Let's first know what does it do: It tries to check whether Chrome's Redux Devtools extension is available for the Redux store to connect to or not.

Disable extension

Go to chrome://extensions.
Locate and disable this extension.
Refresh your app with Chrome Developer tools opened.
Type window.__REDUX_DEVTOOLS_EXTENSION__ in the console, it should return undefined. Note: This is also the case of Incognito window

Enable the extension

Go to chrome://extensions.
Locate and enable this extension.
Refresh your app with Chrome Developer tools opened.
Type window.__REDUX_DEVTOOLS_EXTENSION__ in the console, it should return a function definition.

IMO, it should be removed only if you are no more interested to use this extension for debugging purpose for your app. Disabling it does not/should not mean that we completely remove the ability in our code to connect for debugging purpose.

Next, once we know what does this line do, and we are interested to use this extension whenever we want for any future debugging, we should handle both the cases, when extension is available and when it is not available instead of removing the code itself to connect to it.

Basic Store setup

If you have a Basic Store setup as shown below i.e. it does not use middlewares or enhancers

const store = createStore(
   reducer, /* preloadedState, */
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );

It checks if extension is available, if available call it and if not do nothing which means undefined. createStore method seems to properly handle undefined case and code works fine.

Advanced Store setup

If you have a Advanced Store setup as shown below i.e. it uses middlewares or enhancers using applyMiddleware or you can say we use compose

const store = createStore(reducer, /* preloadedState, */ compose(
  applyMiddleware(...middleware)
));

Code to connect to the extension using compose is (This is what is the situation in the question)

const store = createStore(reducer, /* preloadedState, */ compose(
  applyMiddleware(...middleware),
  window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()
));

compose wants its arguments to be of function type and finding the devtools extension can return undefined. And for undefined cases, it will try to use undefined.apply method and throws an error. And this is the root cause of the issue.

Solution - Not so complete

As many answered, use window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f

For the undefined cases, it will run (f => f).apply which executes successfully. But this is more of fooling the compose method and looks hacky to me.

Solution - Complete

If there a way where I can decide to use compose or not, or a way to enhance the compose method.

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware)
));

Please note that you need not now check window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() because it has been taken care of in window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

You may verify this code when extension is enabled and disabled (Steps are given above). This should work fine without any issues.

All these code snippets are from the Redux devtools Readme file.

These codes are for debugging on development/local environment only. For production, you may add conditions to opt it out.

Redux TypeError: Cannot read property 'apply' of undefined

18 Answers18

Basic Store setup

Advanced Store setup

Solution - Not so complete

Solution - Complete

Linked