Redux TypeError：无法读取未定义的属性“应用”

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

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 9

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 10

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 11

确保您已下载适用于 chrome 的redux-devtools扩展，并将站点访问权限更改为在所有站点或特定站点上，方法是转到管理扩展 > Redux DevTools（详细信息）> 站点访问

Answer 12

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 13

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 14

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

Answer 15

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

Answer 17

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;

Answer 18

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