Implementing Redux-Saga with configureStore

Question

My first time attempting to implement redux-saga with configureStore. The following is my store:

//LOCAL
import { rootSaga } from "./saga"
import { reducer } from "./reducers"
//GLOBAL
import {configureStore} from "@reduxjs/toolkit"
import createSagaMiddleware from "redux-saga"
import logger from "redux-logger"

//create Middleware
const sagaMiddleware = createSagaMiddleware()
sagaMiddleware.run(rootSaga)

const store = configureStore(
    {
        reducer: reducer,
        middleware: [sagaMiddleware, logger]
    }

)

export default store

I'm getting the following error:

Before running a Saga, you must mount the Saga middleware on the Store using applyMiddleware
at Function.sagaMiddleware.run 

Which makes sense since I've run the middleware before applying it to the store. However, when I place it after the configureStore call, I get:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

I've gotten this error before, and I don't believe it, since it just seems to crop up for various different issues. So what exactly am I doing wrong here?

Any help is appreciated, thanks!

Answer 1

I found the answer here: https://stackoverflow.com/a/69242812

I had a similar issue; I fixed this by running npm install react-redux redux . Try it.

It apparently had nothing to do with my code but rather I didn't have the proper packages installed. Hope this can help someone else one day!