uncaught Invariant Violation: Could not find "store" in either the context or props of "Connect(App)"

Question

I know this issue has been asked, but all the answers are for store not provided in the root component. My store does wrap index.js, and I am still having this issue when connecting with App.js.

I also tried passing the store directly into App.js, but still the same issue. Is it possible that the store itself is created incorrectly? I have included it the code below.

Thank you.

Error message:

store.js

import { createStore, applyMiddleware } from "redux";
import { connectRouter, routerMiddleware } from "connected-react-router";
import thunk from "redux-thunk";
import logger from "redux-logger";
import { createBrowserHistory } from "history";
import reducers from "./reducers";

export const history = createBrowserHistory();
const connectedRouter = connectRouter(history)(reducers);

export const store = createStore(
  connectedRouter,
  applyMiddleware(routerMiddleware(history), logger, thunk)
);

index.jsx (Provide the store by wrapping <App />)

import React from "react";
import ReactDOM from "react-dom";
import axiosDefaults from "axios/lib/defaults";
import App from "./App";
import "./styles/allStyles";
import { Provider } from "react-redux";
import { store } from "./store";

axiosDefaults.xsrfCookieName = "csrftoken";
axiosDefaults.xsrfHeaderName = "X-CSRFToken";

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>

, document.getElementById("root"));

App.jsx (Make use of connect function)

import React, {useEffect} from "react";
import { ConnectedRouter } from "connected-react-router";
import { Route, Switch } from "react-router-dom";
import { Provider, connect } from "react-redux";
import { history, store } from "./store";
import {doSetRoleListProp} from "./actions/index"

const App = ({onSetRoleListProp}) => {

  useEffect(() => {
    getRoles().then((rolelists_response) => {
      onSetRoleListProp(rolelists_response);
    });
  }, []);

  return (
    <ConnectedRouter history={history}>
      <Switch>
        <Route exact path="/new-roles" component={NewRoles} />
        {/* <Route render={() => false} /> */}
      </Switch>
    </ConnectedRouter>
  )
};

const mapDispatchToProps = (dispatch) => {
  return {
    onSetRoleListProp: (roleList) => dispatch(doSetRoleListProp(roleList))
  };
};


export default connect(null, mapDispatchToProps)(App);