Search code examples
reactjsreduxreact-reduxredux-sagareact-boilerplate

Redux-saga with Internet Explorer


I have a React app using redux-saga in IE 11

It seems to be breaking with the following error

Note that this app works perfectly fine in Chrome for versions of last 3 years and in Safari as well (aside for some display issues)

sagas.js

// functions are called bottom to top, this one is called at the end (also can be seen in stack trace below)

function* getGlobalData() {
    console.log('Get global data called');      // this is executed

    // something is failing from here on

    const [
      wardrobeResponse,
      lastListingsResponse,
    ]  = yield [
      call(api_request, {url: 'store/wardrobes/'}),
      call(api_request, {url: 'store/last_listings/'}),
    ]


    yield put(actions.wardrobe.success(wardrobeResponse.json));
    yield put(actions.lastListings.success(lastListingsResponse.json));



}

/**
 * Watches for LOAD_SEARCH_RESULTS action and calls handler
 */
function* getGlobalDataWatcher() {

    console.log('Get data - check if working');
    console.log("global data watcher saga run")
    yield take(Constants.LOAD_GLOBAL_DATA)
    console.log('LOAD_GLOBAL_DATA received in saga')
    const state = yield select()

      if (state.getIn(['global', 'wardrobes']).isEmpty()) {
          console.log('Empty global data, call api')
          yield call(getGlobalData);
      } else {
          console.log('Global data already present, dont call API')
      }

}




function* data() {
  console.log('Get global results saga data called');
  yield fork(getGlobalDataWatcher);
}


export default [
  data
]

console error

uncaught at data 
 at loadMeDataWatcher 
 at loadMeData 
 TypeError: Object doesn't support this action
   at api_request (http://localhost:3002/main.js:5905:3)
   at runCallEffect (eval code:446:7)
   at runEffect (eval code:370:5)
   at next (eval code:259:9)
   at currCb (eval code:329:7)
   at runSelectEffect (eval code:651:7)
   at runEffect (eval code:370:5)
   at next (eval code:259:9)
   at proc (eval code:214:3)
   at resolveIterator (eval code:390:5)

Solution

  • You may install 'babel-polyfill' to your dependencies and add this line to your app.js.

    import 'babel-polyfill'; 
    

    See more