React-Bootstrap：TypeError：未定義またはnull参照のプロパティ 'bool'を取得できません

エリクソンウィリアン

React-Bootstrapのコンポーネントを調べており、次のいずれかのフォームをテストしようとしています。

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Form, FormGroup, Col, FormControl, Checkbox, ControlLabel, Button } from "react-bootstrap";

export default class LoginForm extends React.Component {
    render() {
        return (
            <div class="row content">
                <Form horizontal>
                    <FormGroup controlId="formHorizontalEmail">
                        <Col componentClass={ControlLabel} sm={2}>
                            Email
                  </Col>
                        <Col sm={10}>
                            <FormControl type="email" placeholder="Email" />
                        </Col>
                    </FormGroup>

                    <FormGroup controlId="formHorizontalPassword">
                        <Col componentClass={ControlLabel} sm={2}>
                            Password
                  </Col>
                        <Col sm={10}>
                            <FormControl type="password" placeholder="Password" />
                        </Col>
                    </FormGroup>

                    <FormGroup>
                        <Col smOffset={2} sm={10}>
                            <Checkbox>Remember me</Checkbox>
                        </Col>
                    </FormGroup>

                    <FormGroup>
                        <Col smOffset={2} sm={10}>
                            <Button type="submit">
                                Sign in
                    </Button>
                        </Col>
                    </FormGroup>
                </Form>
            </div>
        );
    }

}

react-bootstrapから何かを使おうとするたびにこのばかげたエラーが発生するという事実を除いて、すべてが問題ないようです。

TypeError: Unable to get property 'bool' of undefined or null reference
./node_modules/react-bootstrap/lib/PanelGroup.js
E:/Insanity/Web/segui_info/node_modules/react-bootstrap/lib/PanelGroup.js:25
  22 | 
  23 | var _utilsValidComponentChildren2 = _interopRequireDefault(_utilsValidComponentChildren);
  24 | 
> 25 | var PanelGroup = _react2['default'].createClass({
  26 |   displayName: 'PanelGroup',
  27 | 
  28 |   propTypes: {
View compiled
__webpack_require__
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87
  84 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |      hotCurrentParents = [];
  86 |  }
> 87 |  return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |  return {
View compiled
./node_modules/react-bootstrap/lib/Accordion.js
E:/Insanity/Web/segui_info/node_modules/react-bootstrap/lib/Accordion.js:13
  10 | 
  11 | var _react2 = _interopRequireDefault(_react);
  12 | 
> 13 | var _PanelGroup = require('./PanelGroup');
  14 | 
  15 | var _PanelGroup2 = _interopRequireDefault(_PanelGroup);
  16 | 
View compiled
__webpack_require__
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87
  84 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |      hotCurrentParents = [];
  86 |  }
> 87 |  return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |  return {
View compiled
./node_modules/react-bootstrap/lib/index.js
E:/Insanity/Web/segui_info/node_modules/react-bootstrap/lib/index.js:9
   6 | 
   7 | exports.__esModule = true;
   8 | 
>  9 | var _Accordion2 = require('./Accordion');
  10 | 
  11 | var _Accordion3 = _interopRequireDefault(_Accordion2);
  12 | 
View compiled
__webpack_require__
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87
  84 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |      hotCurrentParents = [];
  86 |  }
> 87 |  return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |  return {
View compiled
./src/routes/admin.js
http://localhost:3000/static/js/bundle.js:96514:22
__webpack_require__
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87
  84 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |      hotCurrentParents = [];
  86 |  }
> 87 |  return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |  return {
View compiled
./src/App.js
http://localhost:3000/static/js/bundle.js:95293:22
__webpack_require__
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87
  84 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |      hotCurrentParents = [];
  86 |  }
> 87 |  return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |  return {
View compiled
./src/index.js
http://localhost:3000/static/js/bundle.js:96312:22
__webpack_require__
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87
  84 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |      hotCurrentParents = [];
  86 |  }
> 87 |  return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |  return {
View compiled
0
http://localhost:3000/static/js/bundle.js:97408:1
__webpack_require__
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
Anonymous function
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:715
  712 | __webpack_require__.h = function() { return hotCurrentHash; };
  713 | 
  714 | // Load entry module and return exports
> 715 | return hotCreateRequire(0)(__webpack_require__.s = 0);
  716 | 
  717 | 
  718 | 
View compiled
Global code
http://localhost:3000/static/js/bundle.js:1:11

Sagiv bg

これは完全な答えではなく、コードのデモンストレーションと提案にすぎません。コードは正常に見えます（以下の例を参照）。あなたが直面して
いるのと同様の問題があります。
ある人々はこう書いています：

私の問題はnpmリンクが原因です。私は2つのlib（AとB）を持っていますが、どちらもreact-bootstrapに依存しています。Bはv0.28.3に依存し、Aはv0.29.0に依存します。そして、Bはnpmリンクを介してAに依存します。AのコードがBのnode_modulesの下のパッケージを使用するのは奇妙です。とにかく、v0.29.0を使用するようにBのpackage.jsonを更新すると、問題が解決します。

とにかくここにあなたのコードはうまく動いています：

const { Form, FormGroup, Col, FormControl, Checkbox, ControlLabel, Button } = ReactBootstrap;
class LoginForm extends React.Component {
  render() {
    return (
      <div class="row content">
        <Form horizontal>
          <FormGroup controlId="formHorizontalEmail">
            <Col componentClass={ControlLabel} sm={2}>
              Email
                  </Col>
            <Col sm={10}>
              <FormControl type="email" placeholder="Email" />
            </Col>
          </FormGroup>

          <FormGroup controlId="formHorizontalPassword">
            <Col componentClass={ControlLabel} sm={2}>
              Password
                  </Col>
            <Col sm={10}>
              <FormControl type="password" placeholder="Password" />
            </Col>
          </FormGroup>

          <FormGroup>
            <Col smOffset={2} sm={10}>
              <Checkbox>Remember me</Checkbox>
            </Col>
          </FormGroup>

          <FormGroup>
            <Col smOffset={2} sm={10}>
              <Button type="submit">
                Sign in
                    </Button>
            </Col>
          </FormGroup>
        </Form>
      </div>
    );
  }

}

ReactDOM.render(<LoginForm />, document.getElementById("root"));

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.3/react-bootstrap.min.js"></script>
<div id="root"></div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]