Immer: "A state mutation was detected inside a dispatch " error after update to immer 7.0.0

[psantos10]

🙋‍♂ Question

I have this code, which was working well after updating to immer 7.0.0

const accountsSlice = createSlice({
  name: 'accounts',
  initialState,
  reducers: {
    fetchAccountsInit(state) {
      return produce(state, (draft) => {
        draft.status.isFetching = true;
        draft.errors.fetching = [];
      });
    },
...

Today I updated the immer to 7.0.0 and I'm getting this error:

Unhandled Rejection (Error): Invariant failed: A state mutation was detected inside a dispatch, in the path: accounts.errors.fetching. Take a look at the reducer(s) handling the action {"type":"accounts/fetchAccountsInit"}. (http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments)

On Github releases page, I found this :

[BREAKING CHANGE] produce no longer accepts non-draftable objects as first argument

What am I doing wrong there?

It's related? Is there a migration guide since there are tons of breaking changes? I couldn't find a migration guide on the website.

[mweststrate]

Please provide a minimal reproduction.

On Thu, 11 Jun 2020, 20:30 Patrício dos Santos, [e-mail]
wrote:

🙋‍♂ Question

I have this code, which was working well after updating to immer 7.0.0

const accountsSlice = createSlice({

name: 'accounts',

initialState,

reducers: {

fetchAccountsInit(state) {

  return produce(state, (draft) => {

    draft.status.isFetching = true;

    draft.errors.fetching = [];

  });

},

...

Today I updated the immer to 7.0.0 and I'm getting this error:

Unhandled Rejection (Error): Invariant failed: A state mutation was detected inside a dispatch, in the path: accounts.errors.fetching. Take a look at the reducer(s) handling the action {"type":"accounts/fetchAccountsInit"}. (http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments)

On Github releases page, I found this :

[BREAKING CHANGE] produce no longer accepts non-draftable objects as first
argument

What am I doing wrong there?

It's related? Is there a migration guide since there are tons of breaking
changes? I couldn't find a migration guide on the website.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/immerjs/immer/issues/616, or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAN4NBEHGW22V4Z63WL5SOLRWEWERANCNFSM4N3WHXIA
.

[psantos10]

Please provide a minimal reproduction.
…

I created this project and I was able to reproduce the error: https://github.com/psantos10/rtk-demo-2020v1

Looks like, this line: https://github.com/psantos10/rtk-demo-2020v1/blob/bcd98b083c1155951cce4090722b700dce6b10e8/src/features/movies/moviesSlice.ts#L37 is causing the problem. If I remove it, the app will run fine.

The thing is, before updating simmer to 7.0.0, this exact code was working as expected.

STEPS TO RUN THE PROJECT:

1. yarn install

2. npx json-server --watch apiDatabase.json

3. yarn start

[mweststrate]

Hmm that looks like a special assertion coming from RSK. I don't think you need to install, or import produce from Immer in the first place, as afaik RSK already ships with Immer baked in: https://redux-toolkit.js.org/api/createReducer#direct-state-mutation

Summoning @markerikson, he probably has a better idea what that means.

[psantos10]

Thank you @mweststrate . I did ntot know that RSK already ships with immer.

Is working now.

[markerikson]

Yeah, RTK already uses Immer internally, and we're currently shipping Immer v6. Please don't upgrade it yourself - my guess is that some kind of version/package mismatch ended up breaking things.

We'll put out a new RTK release in the next couple days with Immer v7 instead.