Redux-saga with Internet Explorer

Question

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)

score 6 · Accepted Answer · answered Oct 27 '16 at 02:33

6

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

import 'babel-polyfill';

answered Oct 27 '16 at 02:33

Bruce Mu

893
11
22

2

You may want to try a much smaller import to achieve the same: `import 'core-js/es6/symbol`. For me, this adds only 11KB bundle size, whereas babel-polyfill adds 87KB bundle size. Also, core-js is already part of https://www.npmjs.com/package/create-react-app. The only caveat: I tried this successfully with TypeScript targetting ES5 and the `downlevelIteration`option. So it could be that the above import is not enough for JavaScript. For a deeper discussion, see my (accepted) PR to "create-react-app-typescript": https://github.com/wmonk/create-react-app-typescript/pull/194 – Carsten Führmann Dec 01 '17 at 13:32

Redux-saga with Internet Explorer

sagas.js

console error

1 Answers1