RTK Query documentation example throws error - reactjs

Question

I am pretty much using the documentation example for fetching some data from a json file and I am getting this particular error:
react-dom.development.js:22839 Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.
at Object.performAction (<anonymous>:1:31530)
at $ (<anonymous>:1:33343)
at Object.e (<anonymous>:1:37236)
at dispatch (<anonymous>:1:55003)
at buildHooks.ts:768:27
at commitHookEffectListMount (react-dom.development.js:23150:26)
at commitPassiveMountOnFiber (react-dom.development.js:24926:13)
at commitPassiveMountEffects_complete (react-dom.development.js:24891:9)
at commitPassiveMountEffects_begin (react-dom.development.js:24878:7)
at commitPassiveMountEffects (react-dom.development.js:24866:3)
Here is the code:
The create API endpoint:
import { createApi, fetchBaseQuery } from '#reduxjs/toolkit/dist/query/react';
export const widgetConfigApi = createApi( {
reducerPath: 'widgetconfig',
baseQuery: fetchBaseQuery( { baseUrl: '/' } ),
endpoints: ( builder ) => ( {
widgetConfig: builder.query<any[], void>( {
query: () => 'widgetconfig.json',
} ),
} ),
} );
export const { useWidgetConfigQuery } = widgetConfigApi;
The store:
const store = configureStore( {
reducer: {
widgets,
[ widgetConfigApi.reducerPath ]: widgetConfigApi.reducer
},
middleware: ( getDefaultMiddleware ) => getDefaultMiddleware().concat( widgetConfigApi.middleware ),
enhancers: composeEnhancers,
} );
And inside the component I am using the hook:
import { Layout, theme } from 'antd';
import React, { useEffect, useState, lazy } from 'react';
import { v4 } from 'uuid';
import './assets/styles/main.css';
import lineChart from './components/mock/chart-data/lineChart';
import { sideMenuItems } from './components/mock/side-menu/items';
import SideMenu from './components/side-menu/SideMenu';
import { Widget } from '#babilon/babilon-ui-components';
import { useWidgetConfigQuery } from './redux/api/widgetApi';
function App () {
const { Header, Content, Footer } = Layout;
const {
token: { colorBgLayout },
} = theme.useToken();
const [ widgetConfig, setWidgetConfig ] = useState( [] );
const { data, isLoading } = useWidgetConfigQuery();
useEffect( () => {
console.log( data );
!isLoading && setWidgetConfig( data );
}, [] );
return (
<Layout style={ { height: '100vh' } }>
<SideMenu items={ sideMenuItems } />
<Layout style={ { overflow: 'auto', position: 'relative' } }>
<Header style={ { padding: 0, background: colorBgLayout } } />
<Content style={ { margin: '0 16px' } }>
{ widgetConfig.map( ( config: any ) => {
const X = lazy( () => import( config.path ) );
const Y = lazy( () => import( config?.drawer.path ) );
return (
<React.Suspense key={ config.id }>
<Widget styles={ { height: 350 } } className="h-350" { ...structuredClone( config ) } uuid={ v4() }>
<X content series={ lineChart.series } />
</Widget>
</React.Suspense> );
} ) }
</Content>
<Footer style={ { textAlign: 'center' } }>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
</Layout>
);
}
export default App;
Just for context, I am using vite.
I don't know what am I doing wrong here. I checked the docs like 10 times. The ApiProvider works but it should work with the default provider as well.
Update:
I started a new clean project. In vite+react and in create-react-app version of the project I have the same error.
Here is a condesanbox to try and tinker. Maybe I am setting this poorly.
Sandbox

Answer 1

The problem are the enhancers: composeEnhancers.
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
The configureStore function enables the redux dev tools by itself and it's a bad match with the RTK Query package.
import { configureStore } from "#reduxjs/toolkit";
import { API } from "./api";
export const store = configureStore( {
reducer: {
[ API.reducerPath ]: API.reducer
},
middleware: ( getDefaultMiddleware ) => getDefaultMiddleware().concat( API.middleware ),
} );
store.dispatch;
Here is the sample code of the updated store. The codesandbox is updated as well.