RTK Query documentation example throws error

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.