refactoring from createStore (Redux) to configureStore(RTK) leads to doubtfull situation or even error when enhancers are applied

because of VS Code suggestions, I decided to try to rewrite existing code to the one with configureStore.

Before refactor (yes, reducer is taken "as it is", I know that should use combineReducers; but at this time I have one reducer with whole state):

declare module "@mui/styles/defaultTheme" {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DefaultTheme extends Theme {}
}
const composeEnhancers = process.env.NODE_ENV === "production" ? compose : composeWithDevTools({});
export const store = createStore(reducer, composeEnhancers(applyMiddleware(thunkMiddleware)));
const AppProvider: FC = ({ children }) => {
  return (
    <Provider store={store}>
      <QueryClientProvider client={useQueryClient()}>
        <StyledEngineProvider injectFirst>
          <ThemeProvider theme={theme}>
            <SnackbarProvider
              maxSnack={3}
              anchorOrigin={{
                vertical: "bottom",
                horizontal: "center",
              }}
            >
              <PlaceContextProvider>
                <CheckSupportForLocalStorage>
                  <CheckSupportForGeolocation>
                    <SetBackground>
                      <Router>{children}</Router>
                    </SetBackground>
                  </CheckSupportForGeolocation>
                </CheckSupportForLocalStorage>
              </PlaceContextProvider>
            </SnackbarProvider>
          </ThemeProvider>
        </StyledEngineProvider>
      </QueryClientProvider>
    </Provider>
  );
};

After refactor, not working

declare module "@mui/styles/defaultTheme" {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DefaultTheme extends Theme {}
}

const composeEnhancers = process.env.NODE_ENV === "production" ? compose : composeWithDevTools({});
export const store = configureStore({ reducer, enhancers:[composeEnhancers] });
const AppProvider: FC = ({ children }) => {
  return (
    <Provider store={store}>
      <QueryClientProvider client={useQueryClient()}>
        <StyledEngineProvider injectFirst>
          <ThemeProvider theme={theme}>
            <SnackbarProvider
              maxSnack={3}
              anchorOrigin={{
                vertical: "bottom",
                horizontal: "center",
              }}
            >
              <PlaceContextProvider>
                <CheckSupportForLocalStorage>
                  <CheckSupportForGeolocation>
                    <SetBackground>
                      <Router>{children}</Router>
                    </SetBackground>
                  </CheckSupportForGeolocation>
                </CheckSupportForLocalStorage>
              </PlaceContextProvider>
            </SnackbarProvider>
          </ThemeProvider>
        </StyledEngineProvider>
      </QueryClientProvider>
    </Provider>
  );
};

its compiles but throws runtime error:Uncaught Error: Expected the reducer to be a function. I believed I follow this pattern: https://redux-toolkit.js.org/api/configureStore

What is wrong with adding enhancers like this?

Generally, devTools and thunk are part of the default middleware - and if you want to add middleware, you should do so using the middleware option, not the enhancers option.

So in your case,

export const store = configureStore({ reducer });

already has the devTools and the thunk middleware configured, nothing more to do on your side.

Unfortunately, the snippet you are showing up there is not valid JavaScript (missing a ] to be interpretable), and you are passing a composeEnhancers function, not an enhancer itself into that function (and should generally probably also not use the array notation, as that overwrites all the default enhancers).

Without showing the code that really caused this error, it's hard to give more feedback on what exactly is causing you problems there.