Skip to content

The inferred type of 'X-Slice' cannot be named without a reference to '@reduxjs/toolkit/node_modules/immer/dist/internal'. This is likely not portable. A type annotation is necessary. #5014

Open
@marinsokol5

Description

@marinsokol5

Hey folks,

Opening as a duplicate of #1806 since I can't comment on that thread.

It's indeed a small type issue, and I am opening it just because of the high bar for your existing types. If this was another library, I would not even bother.

But effectively, I agree with #1806 (comment), and v2.2.7 does not solve the problem.

Link to TS playground

Copying the example code from https://redux-toolkit.js.org/api/createslice:

import { createSlice } from '@reduxjs/toolkit'
import type { PayloadAction } from '@reduxjs/toolkit'

interface CounterState {
  value: number
}

const initialState = { value: 0 } satisfies CounterState as CounterState

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      state.value++
    },
    decrement(state) {
      state.value--
    },
    incrementByAmount(state, action: PayloadAction<number>) {
      state.value += action.payload
    },
  },
})

into https://www.typescriptlang.org/play, transpiles into

import type { PayloadAction } from '@reduxjs/toolkit';
interface CounterState {
    value: number;
}
export declare const counterSlice: import("@reduxjs/toolkit").Slice<CounterState, {
    increment(state: import("immer").WritableDraft<CounterState>): void;
    decrement(state: import("immer").WritableDraft<CounterState>): void;
    incrementByAmount(state: import("immer").WritableDraft<CounterState>, action: PayloadAction<number>): void;
}, "counter", "counter", import("@reduxjs/toolkit").SliceSelectors<CounterState>>;
export {};

That is quite problematic, because the WritableDraft will depend on root-level immer version, not the one used by RTK. That works only if those are the same, else folks would get such (rightful) compilation errors from above.
This happens because WritableDraft is inferred from Draft but not exported.

If it was this would get transpiled to much nicer

import("@reduxjs/toolkit").WritableDraft

which would then lead to the immer attached to RTK, which may be the root one, and may be the "node_modules/RTK/node_modules/immer".

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions