Search code examples
node.jsreactjsreact-reduxredux-persist

Importing PersistGate from redux-persist leads to "Super expression must either be null or a function, not undefined"


I'm now currently using redux-persist for persistent data storage in my react-redux application. I have set it up according to the documentation. Persistent data storage seems ok, but when I import PersistGate from redux-persist/integration/react, it shows Uncaught TypeError: Super expression must either be null or a function, not undefined. Can someone help me with this?

Here is my index.js:

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import {createStore} from "redux";
import reducers from "./reducers";
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import GG from './containers/gg';
import { PersistGate } from 'redux-persist/integration/react';

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

const persistedReducer = persistReducer(persistConfig, reducers);
let store = createStore(persistedReducer);
let persistor = persistStore(store);

ReactDOM.render(
  <Provider store={store}>
  <GG/>
  </Provider>,
  document.querySelector(".container")
);

package.json

{
  "name": "redux-simple-starter",
  "version": "1.0.0",
  "description": "Simple starter package for Redux with React and Babel support",
  "main": "index.js",
  "repository": "git@github.com:StephenGrider/ReduxSimpleStarter.git",
  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "babel-preset-stage-1": "^6.1.18",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-redux": "^4.0.0",
    "redux": "^3.0.4",
    "redux-persist": "^5.10.0"
  }
}

Thanks for your attention.


Solution

  • This is a problem with your React version. Your React specified version(s), ^0.14.3, do not contain, React.PureComponent, the parent component that PersistGate uses. This causes the error because the superclass redux-persist is trying to extend, React.PureComponent, doesn't exist. This is because React.PureComponent was added to the React API in version 15.3. Upgrade your React version.