React Bootstrap and React.PropTypes validation function

Question

I have a Rails 5 application on which I've installed browserify and react-rails. I'm able to load components and install packages using npm. The browser console when loading some external packages i.e. react-bootstrap components is filled with 'Warning: You are manually calling a React.PropTypes validation function for the....' for each single available prop on a component.

I have looked everywhere, but I don't understand how to fix these warnings. Similar questions have been asked here but this does not seem to have an answer applicable to my issue.

Here are my files:

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "dependencies": {
    "bootstrap": "^3.3.7",
    "browserify": "^13.1.0",
    "browserify-incremental": "^3.0.1",
    "fetch": "^1.1.0",
    "jquery": "^3.1.1",
    "jquery-ui": "^1.12.1",
    "jquery-ujs": "^1.2.2",
    "react": "^15.3.2",
    "react-bootstrap": "^0.30.4",
    "react-dom": "^15.3.2",
    "reactify": "^1.1.1",
    "sweetalert-react": "^0.4.4"
  }
}

application.js

//= require_self
//= require react-server
//= require react_ujs


window.$ = window.jQuery = global.$ = require('jquery');
var React = window.React = global.React = require('react');
var ReactDOM= window.ReactDOM = global.ReactDOM = require('react-dom');
require( 'jquery-ujs' );
require( 'jquery-ui' );
require( 'bootstrap' );
require( 'react-bootstrap' );
require( 'fetch' );
require( './components' );

components.js

var app = window.app = global.app = {};

// Component::Manifest
var AdminDashboard = require( 'components/dashboards/admin' );

app.AdminDashboard = AdminDashboard

admin.js.jsx

var ButtonToolbar = require('react-bootstrap').ButtonToolbar;
var Button = require('react-bootstrap').Button;
var Admin = React.createClass({

  handleClick(){
    alert('This was clicked');
  },


  render: function() {

    return (
      <ButtonToolbar bsClass="btn-group">
        <Button active={true} bsStyle="primary" onClick={this.handleClick}>Primary</Button>
      </ButtonToolbar>
  );
  }
});

module.exports = Admin;

How do I get rid of this warning if it's related to an external package and its components?

I have used react-bootstrap but did not get this error. I used react-bootstrap with webpack. — vijayst
– vijayst, Commented Oct 2, 2016 at 13:41
I tried using webpack but I'm totally unfamiliar with js and npm etc. So I want entirely sure how to integrate with rails. Do you perhaps know of a good tutorial to help guide me @vijayst? — HermannHH
– HermannHH, Commented Oct 2, 2016 at 13:56
This article might help. vijayt.com/post/minimal-scaffolding-react-webpack — vijayst
– vijayst, Commented Oct 2, 2016 at 13:58
Thanks @vijayst. This looks promising. One thing that confused me before, was the entry.js file. What does this do and do I need it in a rails app where I will make use of standard rails view with some react components embedded? — HermannHH
– HermannHH, Commented Oct 2, 2016 at 14:06
This is the tutorial I followed with webpack before: aergonaut.com/rails-4-gulp-webpack-react . I also installed the react-rails gem in order to get the rails view helper. — HermannHH
– HermannHH, Commented Oct 2, 2016 at 14:08

g2jose · Accepted Answer · 2016-12-10 17:11:07Z

1

This might help - https://facebook.github.io/react/warnings/dont-call-proptypes.html. Basically the library you're using react-bootstrap might be using PropTypes in a way that is unsupported by React.

answered Dec 10, 2016 at 17:11

g2jose

1,4851 gold badge11 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nAv · Accepted Answer · 2017-07-25 17:50:56Z

1

Upgrading react-bootstrap should fix this issue. It looks like they addressed this back in June

You can change your package.json to "react-bootstrap": "^0.31.0" and see if that works

answered Jul 25, 2017 at 17:50

nAv

1296 bronze badges

Collectives™ on Stack Overflow

React Bootstrap and React.PropTypes validation function

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related