TypeError: Cannot read property 'subscribe' of undefined PersistGate.componentDidMount

Question

Im adding Redux persist into my applcaition for local storage. I believe ive followed the implementation correctly and i keep getting the error:

Cannot read property 'subscribe' of undefined TypeError: PersistGate.componentDidMount node_modules/redux-persist/es/integration/react.js:76

Here is my code.

store.js

import { createStore, applyMiddleware } from 'redux';
import { persistStore } from 'redux-persist';
import logger from 'redux-logger';

import rootReducer from './root.reducer';

const middlewares = [logger];

export const store = createStore(rootReducer, applyMiddleware(...middlewares));

export const persistor = persistStore(store);

export default { store, persistor };

root.reducer.js

import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

import userReducer from './user/user.reducer';
import cartReducer from './cart/cart.reducer';


const persistConfig = {
    key: 'root',
    storage,
    whitelist: ['cart']
}

const rootReducer = combineReducers({
    user: userReducer,
    cart: cartReducer
});


export default persistReducer(persistConfig, rootReducer);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {BrowserRouter} from 'react-router-dom';
import App from './App';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';

import Store from './redux/store';
ReactDOM.render(
    <Provider store={Store.store}>

        <BrowserRouter> 
            <PersistGate persistor={Store.persistor} />
                <App />
            <PersistGate/>
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);

Answer 1

Syntax was off in index.js PersisGate wrapper.

Correct syntax is

<PersistGate persistor={Store.persistor}>
     <App />
</PersistGate>