Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot read property 'apply' of undefined #2359

Closed
aprilmintacpineda opened this issue Apr 14, 2017 · 19 comments
Closed

Cannot read property 'apply' of undefined #2359

aprilmintacpineda opened this issue Apr 14, 2017 · 19 comments

Comments

@aprilmintacpineda
Copy link

@aprilmintacpineda aprilmintacpineda commented Apr 14, 2017

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.

untitled

untitled2

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
Copy link
Contributor

@TrySound TrySound commented Apr 14, 2017

@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
Copy link
Contributor

@markerikson markerikson commented Apr 14, 2017

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
Copy link
Author

@aprilmintacpineda aprilmintacpineda commented Apr 15, 2017

It's done, thanks.

@samhh
Copy link

@samhh samhh commented May 8, 2017

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
Copy link
Contributor

@markerikson markerikson commented May 8, 2017

You can use this instead:

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

@eko3alpha
Copy link

@eko3alpha eko3alpha commented Jul 8, 2017

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
Copy link

@jamjar919 jamjar919 commented Sep 5, 2017

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

@jamjar919
Copy link

@jamjar919 jamjar919 commented Sep 5, 2017

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
Copy link

@johnazre johnazre commented Feb 1, 2018

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
Copy link

@nitucassian nitucassian commented Mar 13, 2018

// 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
Copy link

@hiteshsahu hiteshsahu commented Mar 26, 2018

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
Copy link

@sebastianovide sebastianovide commented Mar 29, 2018

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

@jaschaio
Copy link

@jaschaio jaschaio commented Jul 5, 2018

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
Copy link

@Bamblehorse Bamblehorse commented Jul 13, 2018

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
Copy link

@rafaelg33 rafaelg33 commented Sep 5, 2018

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

@smsteel
Copy link

@smsteel smsteel commented Sep 6, 2018

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
Copy link

@kirankumarrr kirankumarrr commented Oct 26, 2018

undefinederror

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
Copy link

@jaschaio jaschaio commented Oct 30, 2018

@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:

screen shot 2018-10-30 at 8 37 53 am

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
Copy link

@aditya745 aditya745 commented Nov 16, 2018

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.

untitled

untitled2

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

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

@reduxjs reduxjs deleted a comment from 815065046 Mar 20, 2019
@reduxjs reduxjs deleted a comment from immahesh1 Mar 22, 2019
@reduxjs reduxjs locked as resolved and limited conversation to collaborators Mar 22, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests