Type 'Data' is not assignable to type 'WritableDraft<Data>' After UI Library Update

[yusufdeepwork]

Description:
Hi,

I am facing an issue with Redux Toolkit (v1.8.1) and TypeScript after updating a UI library in my project as a minor version update. After the update, I started receiving the following TypeScript error across all slice files:

Type 'Data' is not assignable to type 'WritableDraft<Data>'.
Types of property 'filters' are incompatible.
Type 'Data2[]' is not assignable to type 'WritableDraft<Data2>[]'

Steps to Reproduce:

1. Update UI library a minor version update.
2. Use Redux Toolkit (v1.8.1) to manage state with TypeScript.
3. Trigger the state update via a reducer function, such as:

   setData: (state, { payload }: { payload: Data }) => {
     state.filter = payload;
   }

4. Encounter the error:

   Type 'Data' is not assignable to type 'WritableDraft<Data>'.
   

Environment:

• Redux Toolkit Version: v1.8.1
• React Version: 18.x
• Node Version: 18.18.0
• Immer Version: 9.0.21
• React-Redux Version: 8.1.3
• TypeScript Version: 4.9.4
• Bundler: Rollup (with configuration as follows)

Possible Cause:

The error appears after updating the UI library, which may have caused a type mismatch between Data and WritableDraft<Data>. The error message specifically mentions an issue with the filters property, where a Data2[] type is being assigned to a WritableDraft<Data2>[].

I also believe that the Rollup configuration in the UI library may be affecting my project. Since the update, I am experiencing this issue in all my slice files where I use Redux Toolkit. Despite having no issues before the update, now every slice file that uses Redux Toolkit and Immer is throwing the same TypeScript error.

Expected Behavior:

There should be no type compatibility issue, and the code should compile without errors after the UI library update.

What I Have Tried:

1. Checked and compared the changes in the UI library between versions.
2. Updated TypeScript configuration and dependencies to ensure compatibility.
3. Reverted some changes to see if the error persists.
4. Tried adjusting the state mutation approach, but the error persists.
5. Double-checked Rollup config in the UI library and found no immediate impact on the Redux Toolkit setup, but the errors persist.

Additional Information:

• Rollup configuration in the UI library was modified, and this might be affecting the types used by Redux Toolkit in my project. I am experiencing these issues across all slice files, which suggests that the Rollup configuration might be causing an issue with module resolution or type inference in TypeScript.
• Rollup might be modifying or bundling the modules in a way that conflicts with TypeScript's type inference in Redux Toolkit.
• No similar issues have been observed with previous versions of the UI library.
• The UI library update may have affected the types or dependencies that Redux Toolkit relies on.

---

What I Am Asking For:
I would appreciate any guidance or solutions to resolve this TypeScript type compatibility issue, especially with respect to how Rollup configuration could be influencing Redux Toolkit's behavior in my project. If this is a known issue with Redux Toolkit or Rollup, any suggestions on how to fix or workaround this problem would be helpful.

Thank you!

---

[EskiMojo14]

this tends to come up in one of two ways:

• Data is an unresolved generic, so TS can't check if Draft<Data> and Data are assignable
• Data includes something odd like HTMLElement instances (which we don't recommend keeping in state)

either way, the easiest way to get around this is to use immer's castDraft function, which is just an identity function but will change the type from Data to Draft<Data>.

state.filter = castDraft(payload);

[yusufdeepwork]

this tends to come up in one of two ways:

• Data is an unresolved generic, so TS can't check if Draft<Data> and Data are assignable
• Data includes something odd like HTMLElement instances (which we don't recommend keeping in state)

either way, the easiest way to get around this is to use immer's castDraft function, which is just an identity function but will change the type from Data to Draft<Data>.

state.filter = castDraft(payload);

I tried it, and it worked successfully without any errors. Now, I will need to refactor all slice files like this. My main concern is why this problem occurred after I updated the UI library, even though there wasn't such an issue before. The UI library includes a rollup.config.js with new upgrade, but I don't understand why it affected my project because there were no other changes, and the UI library doesn't even use Redux Toolkit. Thank you!

[EskiMojo14]

rollup shouldn't affect your typescript experience, and if you're getting them in all slice files there might be something else going on. Make sure you only have one copy of immer in your project.

[yusufdeepwork]

rollup shouldn't affect your typescript experience, and if you're getting them in all slice files there might be something else going on. Make sure you only have one copy of immer in your project.

I checked the project, and there were no major changes in the Immer versions. I tried a few different versions, but I still couldn’t resolve the errors. It seems like there’s only one copy of Immer in the project. I wanted to remove the Immer library from the project, but I couldn’t because the enableMapSet function is being used. I still don’t understand how a small change in a UI library is causing type errors in my project’s slices and actions.

I managed to fix the type errors in about 20 slice files using type assertions and castDraft. I also looked into the Immer library but couldn’t find a function to cast from WritableDraft<Data> to Data. In fact, I encountered the opposite errors as well, and I resolved those using type assertions.

Additionally, I thoroughly checked the versions of each library in the repositories to ensure compatibility, but I still couldn’t pinpoint the exact cause of the issue.

[EskiMojo14]

the opposite of castDraft is castImmutable

[yusufdeepwork]

@EskiMojo14 When I run npm ls immer, it gives this output:

+-- @reduxjs/toolkit@1.8.1
| -- immer@9.0.21 deduped
+-- immer@9.0.21 overriden
-- react-scripts@5.0.1
   -- react-dev-utils@12.0.1
      -- immer@9.0.21 deduped

I overrode Immer to make sure there is only one copy. However, I’m still getting TypeScript errors like this:

setData: (state: ExampleStateType, { payload }: { payload: Data }) => {
  state.filter = payload;
}

Type 'WritableDraft<ExampleStateType>' is not assignable to type 'ExampleStateType'.

Typecasting every assignment using castDraft() works in most cases, but it requires a lot of effort and creates technical debt. My team would prefer not to leave such workarounds in production code. What’s even more confusing is that these errors only started appearing after a minor UI library upgrade — which doesn’t even use Redux Toolkit or Immer — and we’re still trying to understand how that change caused widespread type issues across slice files.

Is there any known reason why this might happen, or a clean way to prevent it without changing all reducers manually?

[markerikson]

@yusufdeepwork i honestly have no idea how another library upgrade could have affected RTK this way.

Can you reproduce this in a standalone repo? Does it go away if you revert the other library?

[yusufdeepwork]

Hi again @EskiMojo14 ,

I tried using castImmutable to convert WritableDraft back to Data, but TypeScript throws the following error:

Type 'Readonly<...>' is not assignable to type 'Data'.
Property '...' is readonly and cannot be assigned to the mutable type 'Data'.

It seems that after using castImmutable, the result is treated as a deeply readonly version of the object, which causes type incompatibility when I try to assign it to something expecting a mutable Data type.

Is this the expected behavior of castImmutable? And if so, is there a recommended way to safely convert a WritableDraft back to T when necessary, without running into readonly assignment issues?

Thanks again for your support!

[EskiMojo14]

generally this is all a bit messy when working with unresolved generic types

you could try making your own cast utility:

const castUndraft = <T>(maybeDraft: T | Draft<T>): T => maybeDraft as T

[yusufdeepwork]

@EskiMojo14 Thank you for your response. Unfortunately, it still doesn’t work. I also tried using custom cast utilities, but none of them resolved the issue properly.

When I use finishDraft, it returns a value of type CustomType | WritableDraft<CustomType> , which brings me closer to a solution — but not quite there. I still haven’t been able to fully resolve the type incompatibility.

I've worked a lot projects with RTK but Why this project gives error I dont know.

Any further guidance would be greatly appreciated. Thanks again for your support.

[EskiMojo14]

at this point I'm not sure what to suggest, it sounds like this project has something in particular that's causing issues.