I have a problem with my version of React

Question

I don't know much about React and I have to test an application made in React.

My problem comes when I try to run the server with gulp nodemon, and I get a lot of errors. Apparently the application is built on an old version of React and doesn't recognize some libraries or modules; I have already solved several of them regarding prototypes or the way a ReactClass is created, but I found one regarding Bootstrap that I haven't been able to solve.

This is the error I get:

bsStyle: _propTypes2['default'].oneOf(_styleMaps2['default'].STYLES),
                                ^
TypeError: Cannot read property 'oneOf' of undefined
    at Object.<anonymous> (/home/kevin/to_check/react-blog/node_modules/react-bootstrap/lib/BootstrapMixin.js:30:43)

This is the file I'm having the trouble with:

'use strict';

var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
exports.__esModule = true;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _styleMaps = require('./styleMaps');
var _styleMaps2 = _interopRequireDefault(_styleMaps);
var _propTypes2 = require('prop-types');
var _reactPropTypesLibKeyOf = require('react-prop-types/lib/keyOf');
var _reactPropTypesLibKeyOf2 = _interopRequireDefault(_reactPropTypesLibKeyOf);

var BootstrapMixin = {
  propTypes: {
    /**
     * bootstrap className
     * @private
     */
    bsClass: _reactPropTypesLibKeyOf2['default'](_styleMaps2['default'].CLASSES),
    /**
     * Style variants
     * @type {("default"|"primary"|"success"|"info"|"warning"|"danger"|"link")}
     */
    bsStyle: _propTypes2['default'].oneOf(_styleMaps2['default'].STYLES),
    /**
     * Size variants
     * @type {("xsmall"|"small"|"medium"|"large"|"xs"|"sm"|"md"|"lg")}
     */
    bsSize: _reactPropTypesLibKeyOf2['default'](_styleMaps2['default'].SIZES)
  },

  getBsClassSet: function getBsClassSet() {
    var classes = {};

    var bsClass = this.props.bsClass && _styleMaps2['default'].CLASSES[this.props.bsClass];
    if (bsClass) {
      classes[bsClass] = true;

      var prefix = bsClass + '-';

      var bsSize = this.props.bsSize && _styleMaps2['default'].SIZES[this.props.bsSize];
      if (bsSize) {
        classes[prefix + bsSize] = true;
      }

      if (this.props.bsStyle) {
        if (_styleMaps2['default'].STYLES.indexOf(this.props.bsStyle) >= 0) {
          classes[prefix + this.props.bsStyle] = true;
        } else {
          classes[this.props.bsStyle] = true;
        }
      }
    }

    return classes;
  },

  prefixClass: function prefixClass(subClass) {
    return _styleMaps2['default'].CLASSES[this.props.bsClass] + '-' + subClass;
  }
};

exports['default'] = BootstrapMixin;
module.exports = exports['default'];

This is the package.json file that the application has:

{
  "name": "React-Isomorphic-Blog",
  "version": "1.0.0",
  "description": "React Isomorphic Blog",
  "author": "Jonathan Rossi <[email protected]>",
  "license": "MIT",
  "dependencies": {
    "alt": "^0.14.5",
    "babel": "^4.7.16",
    "body-parser": "^1.12.3",
    "cookie-parser": "^1.3.4",
    "create-react-class": "^15.6.3",
    "express": "^4.12.3",
    "express-session": "^1.10.4",
    "iso": "^4.0.2",
    "jade": "^1.9.2",
    "marked": "^1.1.0",
    "moment": "^2.10.2",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-bootstrap": "^0.26.2",
    "react-ga": "^2.1.2",
    "react-prop-types": "^0.4.0",
    "react-router": "^3.2.6",
    "superagent": "^5.2.2"
  },
  "devDependencies": {
    "browserify": "^16.5.1",
    "gulp": "^4.0.2",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-nodemon": "^2.0.2",
    "gulp-print": "^2.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^4.1.0",
    "gulp-uglify": "^1.5.4",
    "nodemon": "^1.3.7",
    "reactify": "^1.1.0",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "paths": {
    "app": "./src/client.js"
  },
  "dest": {
    "app": "bundle.js",
    "dist": "public/scripts/react"
  },
  "main": "bin/www.js",
  "scripts": {
    "start": "node --use_strict bin/www.js"
  }
}

I hope you can help me with that problem, I really couldn't find a solution. Thank you very much.

Answer 1

React.PropTypes has been extracted to it's own package since React v15.5.0.

From this issue. The fix is to use the prop-types package instead

// bsStyle: _react2['default'].PropTypes.oneOf(_styleMaps2['default'].STYLES), // not this
bsStyle: _propTypes2['default'].oneOf(_styleMaps2['default'].STYLES) // do this after installing prop-types