Document immer.enableMapSet requirement

[mrdave-dev]

Hey there,

I YOLO update every Tuesday and was greeted with an error in my create-react-app:

Error: [Immer] The plugin for 'MapSet' has not been loaded into Immer. To enable the plugin, import and call `enableMapSet()` when initializing your application.

Likely this is because I use the native Map and Set in my redux store. I attempted to do as the error described, but the method was undefined.

To see what packages are using immer in my project (and their versions), I used npm ls:

 npm ls immer
my-website-package@1.0.0 /.../MyWebsitePackage
├─┬ @reduxjs/toolkit@1.3.1
│ └── immer@6.0.2
├─┬ @storybook/react@5.3.17
│ └─┬ react-dev-utils@9.1.0
│   └── immer@1.10.0
└─┬ react-scripts@3.4.1
  └─┬ react-dev-utils@10.2.1
    └── immer@1.10.0

A few other dependencies are using immer@1, so likely I'm getting one of those immer versions when importing from my source code.

How to resolve

To resolve this problem, I added immer as a dependency, imported it before using combineReducers

// ...
import { enableMapSet } from 'immer'

enableMapSet()

export const createRootReducer = (history: any) => combineReducers({
  // ...
})

Now my dependency tree looks like this:

 npm ls immer
my-website-package@1.0.0 /../MyWebsitePackage
├─┬ @reduxjs/toolkit@1.3.1
│ └── immer@6.0.2  deduped
├─┬ @storybook/react@5.3.17
│ └─┬ react-dev-utils@9.1.0
│   └── immer@1.10.0
├── immer@6.0.2
└─┬ react-scripts@3.4.1
  └─┬ react-dev-utils@10.2.1
    └── immer@1.10.0

Success! 😎

I ask that you document this, as I found no references to this in the release notes. I also figured it was worth opening an issue to document how to resolve this behavior for anyone else who comes across this issue.

[markerikson]

This was specifically covered in the v1.3.0 release notes:

Immer 6.0

Per the Immer documentation on customizing Immer's capabilities, Immer now uses a plugin architecture internally, and additional functionality has to be explicitly enabled as an opt-in. There are currently three Immer plugins that can be enabled: ES5 support (for environments without ES6 Proxies), Map/Set support, and JSON Patch support.

Redux Toolkit force-enables ES5 support. This is because we expect RTK to be used in multiple environments that do not support Proxies, such as Internet Explorer and React Native. It's also how Immer previously behaved, so we want to keep that behavior consistent and not break code given that this is a minor release of RTK. (In a hypothetical future major release, we may stop force-enabling the ES5 plugin and ask you to do it if necessary.)

Overall, this should drop a couple KB off your app's minified bundle size.

You may choose to enable the other plugins in your app code if that functionality is desired.

Note that we specifically advise against putting any non-serializable values in the Redux store, and the serializable check middleware should be logging errors when you do so.

And yeah, I already filed an issue against react-dev-utils asking them to bump their use of Immer:

facebook/create-react-app#8750

[mrdave-dev]

My bad. Thanks!