redux-persist PersistGate causing Uncaught TypeError: Super expression must either be null or a function, not undefined.

When I include import { PersistGate } from 'redux-persist/integration/react'; into my app.js file it throws an exception Uncaught TypeError. I am not sure how to proceed.

My code is as follows: App.js

import 'whatwg-fetch';
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reduxPromise from 'redux-promise-middleware';
import { BrowserRouter, browserHistory } from 'react-router-dom';
import { PersistGate } from 'redux-persist/integration/react';

import { store, persistor } from './config/reduxStore';
import { Header, Main } from './components';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware(
  reduxPromise()
)(createStore);

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Provider store={store}>
        <PersistGate  loading={<div />} persistor={persistor}>
          <BrowserRouter history={browserHistory}>
            <Main />
          </BrowserRouter>
        </PersistGate>
      </Provider>
    );
  }
}

render(<App />, document.getElementById('app'));

reduxStore.js

import { applyMiddleware, createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web and AsyncStorage for react-native
import reduxPromise from 'redux-promise-middleware';

import rootReducer from '../reducers';

const middleware = applyMiddleware(reduxPromise());

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export default () => {
  let store = createStore(persistedReducer, middleware);
  let persistor = persistStore(store);
  return { store, persistor };
};

Apr 11 '18 14:04 lesansley

Same problem here.

Apr 23 '18 14:04 fsalata

Same problem, any solution found?

Jun 01 '18 11:06 andela-mallan

I had to change to use redux-saga.

Jun 02 '18 12:06 lesansley

You should be able to take the constructor out and just render it. There typically won't be any props passed into the initial component that you've registered.

Jun 06 '18 14:06 vincentvella

To anyone who is looking for a fix, the problem is most likely your React version. PersistGate uses React.PureComponent, only available in React v15.3+. See https://stackoverflow.com/questions/51317610/can-not-import-persistgate-from-redux-persist-super-expression-must-either-be/51317754#51317754

Upgrade your React to v15.3+ to fix the issue.