IE11 and Immer in a NextJS Environment

[citygent]

Hey all!

I have an issue with using RTK in our NextJS project. I get this error when I launch the application in IE11:

[Immer] The plugin for 'ES5' has not been loaded into immer. To enable the plugin, import and call 'enablesES5()' when initializing your application

From the above error, and this post (#476) and the Immer documentation, I realise the method enableES5 needs to be called on init. However, having tried both importing and calling enableES5 at the top of every file RTK is used, and also by wrapping every single call to RTK in a function that first calls enableES5 eg:

import { enableES5 } from 'immer';
import { configureStore as rtkConfigureStore } from '@reduxjs/toolkit';

...

const configureStore = (arg) => {
  enableES5();
  return rtkConfigureStore(arg);
};

These changes don't appear to affect running in any other browser, but they do not help me get past the Immer error in IE11, either.

My knowledge of Webpack and NextJS is not expert level, but my hypothesis are:

• Webpack treeshakes this method away somehow.
• Instantiation of the store serverside, in the Node Server env is preventing Immer from running in ES5.

I have at least debugged the possibility there are two Immers in the project using yarn why, and this isn't the case.

I honestly don't know the best way of debugging this, and suggestions would be massively appreciated.

PS: I know. IE11. Unfortunately I absolutely do not have the option of not supporting this browser, but we also really want to use RTK (and by extension, RTKQuery) as it's enabled us to massively simplify our codebase! 🙏🏻

[markerikson]

Hmm. We do automatically call enableES5 already, but we did change where that call is made in RTK 1.6.

Previously, we did it directly in the index.ts entry point file. In 1.6, we changed it to be inside of createReducer:

redux-toolkit/packages/toolkit/src/createReducer.ts

Lines 200 to 204 in 7985091

	// We deliberately enable Immer's ES5 support, on the grounds that
	// we assume RTK will be used with React Native and other Proxy-less
	// environments. In addition, that's how Immer 4 behaved, and since
	// we want to ship this in an RTK minor, we should keep the same behavior.
	enableES5()

Are you actually using createSlice or createApi anywhere in the codebase? Those ultimately call createReducer internally, so as long as those get called somewhere, this should be running.

My only immediate suggestion for debugging would be to slap some console.log() statements into the actual RTK published code in node_modules and see if createReducer is being run, and where.

[citygent]

Thanks so much for a quick response Mark.

We do indeed call createReducer via createSlice, and I even stuck a log in Immers enableES5 itself and this gets called (serverside) from the .cjs. builds.

However I also noticed something odd, and this is maybe odd because my lack of knowledge: On the client we get the (forwarded from a serverside error) error and stack trace from the .esm. build of Immer that's within node_modules, not the cjs. Despite the logs in CJS build also getting called. I am v confused.

[markerikson]

Yeah, same here. Not sure I have any further suggestions here atm.

That said, we're probably going to move the enableES5 call back to our index.ts entry point in 1.6.1 - we can assume pretty much everyone using RTK is also using createReducer one way or another, so it's not like many people would be getting the extra bundle size from enableES5 than they would have anyway.

[citygent]

Hey, I haven't had time to debug this today, but I will try importing and calling enableES5 in the index of RTK to see if that remedies it. At the moment though this looks like a deficiency of nexts babel config with regard to IE11 and dependencies, and I'll have to learn the innards of Babel and extend or modify it to get this to work how I want 😄

[citygent]

This fixes the issue for us Mark, thanks very much!!