Still getting PropTypes warning after installing react-proptypes, upgrading code and major upgrades on node modules;

Question

I'm working on a React project and am trying to get rid of the below warning about PropTypes. I have done a lot of reading into this, and I have done major updates of all my dependencies, installed react-proptypes and updated my code, but I am still getting the warning.

I get the same warning even after taking out PropTypes from my own code and using this.props.history.push('/') instead, so I have to think that the warning is coming from one of my dependencies but they are all up-to-date (all except [email protected] which I have not upgraded since it gives me a similar createComponent warning in addition).

Any ideas on why?

Below is my code where I use PropTypes and my package.json.

Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
// import PropTypes from 'prop-types';

export default function (AuthRequiredComponent) {
  class Authentication extends Component {
    static contextTypes = {
      router: PropTypes.object
    }

    componentDidMount() {
      if (!this.props.authenticated) {
        this.context.router.history.push('/');
      }
    }

    componentDidUpdate(nextProps) {
      if (!nextProps.authenticated) {
        this.context.router.history.push('/');
      }
    }

    render() {
      return <AuthRequiredComponent {...this.props} />;
    }
  }


  function mapStateToProps(state) {
    return {
      authenticated: state.auth.authenticated,
      email: state.auth.email
  };
 }
  return connect(mapStateToProps)(Authentication);
}

package.json:

"author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^8.0.2",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "babel-preset-stage-0": "^6.24.1",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "css-loader": "^0.28.11",
    "eslint-config-rallycoding": "^3.2.0",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^15.0.1",
    "style-loader": "^0.21.0",
    "webpack-dev-server": "^3.1.8"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "babel-core": "^6.2.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-stage-1": "^6.1.18",
    "cloudinary-core": "^2.5.0",
    "cloudinary-react": "^1.0.6",
    "dotenv-webpack": "^1.5.5",
    "file-loader": "^1.1.11",
    "jquery": "^2.2.4",
    "jsdom": "^8.1.0",
    "lodash": "^4.1.0",
    "prop-types": "^15.6.1",
    "react": "^15.6.2",
    "react-bootstrap": "^0.32.1",
    "react-day-picker": "^7.1.6",
    "react-dom": "^15.6.2",
    "react-dropzone": "^5.0.1",
    "react-helmet": "^5.2.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.0.0",
    "react-stripe-elements": "^2.0.1",
    "redux": "^4.0.0",
    "redux-form": "^6.8.0",
    "redux-thunk": "^2.2.0",
    "sha1": "^1.1.1",
    "webpack": "^4.17.2"
  }

For posterity, I finally got rid of the pesky PropTypes warning by running a search on my text-editor, Atom, for "{ PropTypes } from 'react'" in the node-modules directory and react-router-dom came up in the results. Apparently, the module (v4.0) still used PropTypes from react, and upgrading to v4.3.1 got rid of the warning. — bigmugcup

Hemadri Dasari Hemadri Dasari · Accepted Answer · 2018-09-07T08:25:19

You need to set like this

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

export default function (AuthRequiredComponent) {
  class Authentication extends Component {

    componentDidMount() {
      if (!this.props.authenticated) {
        this.context.router.push('/');
      }
    }

    componentDidUpdate(nextProps) {
      if (!nextProps.authenticated) {
        this.context.router.push('/');
      }
    }

    render() {
      return <AuthRequiredComponent {...this.props} />;
    }
  }

  Authentication.propTypes = {
     router: PropTypes.object
  }

  function mapStateToProps(state) {
    return {
      authenticated: state.auth.authenticated,
      email: state.auth.email
  };
 }
  return connect(mapStateToProps)(Authentication);
}

Still getting PropTypes warning after installing react-proptypes, upgrading code and major upgrades on node modules;

1 Answers