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

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link
Author

@aprilmintacpineda aprilmintacpineda commented Apr 15, 2017

It's done, thanks.

@SamHH

This comment has been minimized.

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

This comment has been minimized.

Copy link
Contributor

@markerikson markerikson commented May 8, 2017

You can use this instead:

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

@sebastianovide sebastianovide commented Mar 29, 2018

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

@jaschaio

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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 m1github 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.
You can’t perform that action at this time.