I am receiving weird error regarding GatePage.

Error

Could not find "store" in either the context or props of "Connect(GatedPage)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(GatedPage)".

Main index

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import "./assets/css/main.scss";
import App from "./App";
import { configureStore } from "./store";
import { verifyCredentials } from "./lib";
import * as serviceWorker from "./utils/serviceWorker";

const store = configureStore();
verifyCredentials(store);

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

Routes

import React, { Component, Fragment } from "react";
import { Route } from "react-router-dom";
import { generateRequireSignInWrapper } from "redux-token-auth";

import { Home, Login, Protected, SignUp } from "../containers";
import {
  ROOT_PATH,
  SIGN_IN_PATH,
  SIGN_UP_PATH,
  PROTECTED_PATH
} from "../constants/routes";

const requireSignIn = generateRequireSignInWrapper({
  redirectPathIfNotSignedIn: "/login"
});

export default class Routes extends Component {
  render() {
    return (
      <Fragment>
        <Route exact path={ROOT_PATH} component={Home} />
        <Route path={PROTECTED_PATH} component={requireSignIn(Protected)} />
        <Route path={SIGN_IN_PATH} component={Login} />
        <Route path={SIGN_UP_PATH} component={SignUp} />
      </Fragment>
    );
  }
}

Main App container

import React, { Component } from "react";

import { withHead } from "../lib";
import { Layout } from "../components";
import Routes from "../Routes";

class App extends Component {
  render() {
    return (
      <Layout>
        <Routes />
      </Layout>
    );
  }
}

export default withHead(App);

Versions

  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.2",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "redux-token-auth": "^0.19.0",
  }

[gtournie]

you can also just replace the requireSignIn function by this one:

import React, { useEffect } from 'react'
import { compose } from 'redux'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'

const LOGIN_PATH = '/login'

[...]

const requireSignIn = Component =>
  compose(
    withRouter,
    connect(state => ({ authUser: state.reduxTokenAuth.currentUser })),
  )(({ authUser, ...props }) => {
    useEffect(() => {
      if (!authUser.isSignedIn && !authUser.isLoading) props.history.push(LOGIN_PATH)
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [authUser])
    return authUser ? <Component {...props} /> : null
  })

[tropicalwhite]

@suyesh Follow https://yarnpkg.com/lang/en/docs/selective-version-resolutions/, Adding this config to your package.json to resolve the issue, I tested and it works

  "resolutions": {
    "react-redux": "^7.1.1"
  },

This config tells redux-token-auth depends on newest react-redux version