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