redux thunk cannot be use as middleware using Typescript 5.0 or above

[ntamll]

Bug Report

building redux thunk in Typescript 5 (with vite) result in following error

`> vite2@0.0.0 build

tsc && vite build

src/store/store.ts:16:23 - error TS2741: Property 'prepend' is missing in type '(Middleware<{}, any, Dispatch> | ThunkMiddleware<any, AnyAction, undefined>)[]' but required in type 'Tuple<Middlewares>'.

16 middleware: () => [logger, thunk.thunk ],
~~~~~~~~~~~~~~~~~~~~~~

node_modules/@reduxjs/toolkit/dist/utils.d.ts:14:5
14 prepend<AdditionalItems extends ReadonlyArray>(items: Tuple): Tuple<[...AdditionalItems, ...Items]>;
~~~~~~~
'prepend' is declared here.
`

Package name / version

"react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.0.5", "react-router-dom": "^6.11.2", "react-scripts": "5.0.1", "redux-logger": "^3.0.6", "redux-thunk": "^2.4.2", "typescript": "^5.0.2", "vite": "^4.4.5"

Description

Steps to reproduce

create a vite project
import react-redux, redux-thunk

apply thunk to middleware using Typescript 5.0.x or above.

`import thunk from 'redux-thunk';
import logger from 'redux-logger';
import rootReducer from './reducers/rootReducer';
import { configureStore, Store, ConfigureStoreOptions } from '@reduxjs/toolkit';

// redux configure store
// see: https://redux-toolkit.js.org/api/configurestore/

var store: Store;

export const setupStore = (initialState: any): void => {
const config : ConfigureStoreOptions = {
reducer: rootReducer,
middleware: () => [logger, thunk ]
};

store = configureStore(config);
};`

Expected behavior

this will build in both create-react-app or vite

Environment

• OS: Windows 10 Professional
• Node/npm version: v20.2.0
• Browser: [Edge, Chrome]

Additional context / screenshots

[markerikson]

Yeah, your setup there needs to be changed in two ways:

• First, you shouldn't be manually adding thunk to configureStore yourself. The default middleware already includes that. You need: middleware: (getDefaultMiddleware) => getDefaultMiddleware().prepend(logger).
• Second, if you absolutely need to return an array of middleware yourself (which you shouldn't), the right syntax for TS usage here is to use a Tuple instead of an array: https://redux-toolkit.js.org/api/configureStore#middleware