RTK Query Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

Question

So this is the issue , im currently working on a monorepo application with different redux-toolkit versions , whenever i mix the versions the applications crash with the below issue, i do have the provider of my application set it up (it was working as expected but since i run yarn-deduplicate && yarn install application start showing that issue)

when i start troubleshooting the issue i comment RTK query api hooks and the applications run as expected

this is my index.ts file top level of the app

/**
 * This is the entry file for the application, only setup and boilerplate code.
 */
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';


import App from './common/app/App';
import { store } from './common/store/store';


const render = () => {
  ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter basename={'/'}>
          <App />
        </BrowserRouter>
    </Provider>,
    document.getElementById('app'),
  );
};

render();

this is my store

    import { configureStore } from '@reduxjs/toolkit';
    import { api } from './api';
    import apiReducer from './apislice';
    
    export const store = configureStore({
      reducer: {
        apiState: apireducer,
        [api.reducerPath]: api.reducer,
      },
      middleware: (gDM) => gDM().concat(api.middleware)
    });
    
    export type RootState = ReturnType<typeof store.getState>;

this is my api since is a private project i mock the file

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';


const settings = { 'Content-Type': 'application/json' };
const apiUrl = '/test-api/';

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/some-url/' }),
  tagTypes: ['testing'],
  endpoints: (builder) => ({
    fetchAll: builder.query({
      query: () => `${apiUrl}/page/fetchAll`,
      providesTags: ['testing'],
    }),

  }),
});

// Export hooks for usage in functional components, which are
// auto-generated based on the defined endpoints
export const {

  useFetchAllQuery,

} = api;

app.js

/* eslint-disable */
import React from 'react';
import { useFetchAllQuery } from '../store/api';

const App = () => {
  const { isFetching, isError } = useFetchAllQuery();
  console.log(isFetching)
  console.log(isError)
  return (
    <>
      <h1>Hello</h1>
    </>
  );
};

export default App;

so redux crash on the firts RTK query call if i comment the api i can use redux store without a problem

versions: "@reduxjs/toolkit": "^1.8.5", "react-redux": "^8.0.2",

im been dealing with this TWO days hope someone can help me

Answer 1

As @xixe pointed out, the fix here is make sure you react-redux version is the same as @reduxjs/toolkit. They don't mention this in their docs, so I think that'd be helpful.

EDIT: I've opened an issue for this in reduxjs/react-toolkit