cant get redux-toolkit to work in IE11

[MMT-LD]

So, i bundle may app using webpack and preset env for ie11 using corejs 3 and all works in all browsers absolutely fine, using browserstack. However, IE11 doesn't seem to work when i included the provider from redux-toolkit, however if i remove the <Provider store={store}> from the app and remove anything related, within the nested components, related to redux toolkit my app works in ie11. I have included a screenshot to help see the issue i'm facing.... Any help would much appreciated.

Error details:

SCRIPT5022: Exception thrown and not caught
to-primitive.js (13,3)

[phryneas]

Provider is part of react-redux and not redux-toolkit. If you are not getting this during configureStore or other methods exported from RTK, please take this issue there.

[MMT-LD]

Provider is part of react-redux and not redux-toolkit. If you are not getting this during configureStore or other methods exported from RTK, please take this issue there.

Unfortunately, after some more digging it would appear it has something to do with configureStore. For example in ie11 in a simple test case.... this display no error...

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false,
        },
      ];
    case 'TOGGLE_TODO':
      return state.map(todo =>
        todo.id === action.id ? { ...todo, completed: !todo.completed } : todo,
      );
    default:
      return state;
  }
};

const store = createStore(combineReducers({ todos }));

const App = props => (
  <Provider store={store}><SomeComponent /></Provider>
);

however, The below gives me the error i see above (initial issue)... same todos..

const store = configureStore({ reducer: combineReducers({ todos }) });

const App = props => (
  <Provider store={store}><SomeComponent /></Provider>
);

Hope that helps in anyway?

[markerikson]

What specific version of Redux Toolkit are you using?

Can you recreate the issue in a CodeSandbox?

[MMT-LD]

Thanks for replying, saw the issue was closed and was like oh lol.

^1.2.3 is my current version - i could try the 1.2.4? but not sure this would fix it... I maybe could try a bit later/tomorrow to put into CodeSandbox if that helps?

[markerikson]

Shouldn't be any actual difference between 1.2.3 and 1.2.3 in that regard, since it was just a types change.

But yeah, if you can put it in a sandbox, that would help.

[markerikson]

Note that #152 was a previous issue that might be related.

[phryneas]

This seems like your core-js "toPrimitive" polyfill possibly conflcts with another polyfill that does something similar, like in this issue: zloirock/core-js#566

Looking further at this, this looks pretty much like a bundling/polyfill issue on your side.
RTK does not provide polyfills (it would be very problematic, that way you would ship all polyfills multiple times for each library), this is something in your bundler config.

[phryneas]

So yes, you are getting this error when invoking RTK. But that's only because configureStore calls applyMiddleware in redux, which calls the _objectSpread2 helper, that calls Object.getOwnPropertyDescriptor and that should be correctly polyfilled for IE11 by your bundle setup, but apparently isn't in your scenario.

[MMT-LD]

So yes, you are getting this error when invoking RTK. But that's only because configureStore calls applyMiddleware in redux, which calls the _objectSpread2 helper, that calls Object.getOwnPropertyDescriptor and that should be correctly polyfilled for IE11 by your bundle setup, but apparently isn't in your scenario.

You are completely correct. This issue was a bundling one... Basically a library i used bundles its lib with polyfills included and this used core-js: 3.4.5 and this app used 3.6.5... if i set it to 3.4.5 it all started working. thanks @phryneas and @markerikson for all your help. Maybe we should never include polyfills by default and let the consumer decide how to use it...

[phryneas]

@MMT-LD you're welcome.
Although this lib should not ship with any polyfills - I just checked our build artifacts and there is no reference to core-js as far as I can see. Did I understand you correctly that somehow in your setup RTK seems to reference core-js?

[MMT-LD]

@phryneas No sorry my bad probably led you down the wrong path. We have a design system that is already compiled to work in ie11 so core-js is defined in that package. That package is using 3.4.5 and in my app i use core-js 3.6.5 and obviously this is conflicting. So downgraded core-js and all now works.

[phryneas]

Ah, okay. Thanks for the clarification! 👍

[dannyshaw]

@MMT-LD What package was it out of interest? How did you discover this was the cause?