React Bootstrap in JSX file in Meteor

Question

I have installed React Bootstrap package in my meteor app.

https://atmospherejs.com/universe/react-bootstrap

On that page it says that:

This package additionally export ReactBootstrap as a global, so you can write inside any .jsx file

It then gives an example.

let { Button } = ReactBootstrap;

<Button /> // React component
or

<ReactBootstrap.Button /> // React component

However, when I do:

render(){


        return (
                <div>

                    <ReactBootstrap.Button/>

                </div>
            );
    }

inside my render() function for React in Meteor I get the following error:

universe_react-bootstrap.js?hash=85ba81631c5fee5b5e0bceb7d1dc34847f2f2e89:14811 Uncaught TypeError: Cannot read property '__reactAutoBindMap' of undefined at Constructor (universe_react-bootstrap.js?hash=85ba81631c5fee5b5e0bceb7d1dc34847f2f2e89:14811) at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:291) at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:259) at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:178) at Object.mountComponent (ReactReconciler.js:49) at ReactDOMComponent.mountChildren (ReactMultiChild.js:242) at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:704) at ReactDOMComponent.mountComponent (ReactDOMComponent.js:529) at Object.mountComponent (ReactReconciler.js:49) at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:367)

But if I do:

render(){
   console.log(ReactBootstrap)
}

I get confirmation that that global variable exists....

How do I use it ReactBootstrap within the div tags???

This is the whole code:

import React, { Component } from 'react';


// App component - represents the whole app
export default class App extends Component {



  render() {
    return (
      <div>
        <h1>Testing</h1>
        <ReactBootstrap.Button /> 
      </div>
    );
  }
}

Here is GitHub link: https://github.com/blissGitHub/TestingReactBootstrapWithMeteor.git

Answer 1

The problem seems like in universe:react-bootstrap package. It's too old and seems like not maintained anymore. It uses outdated version of react-boostrap: 0.24.2, while its current one is 0.31.3 (released just 3 weeks ago).

So, it seems like we should get rid of it:

meteor remove universe:react-bootstrap
meteor add twbs:bootstrap
meteor npm i --save react-bootstrap

And slightly modify your code:

import React, { Component } from 'react';
import ReactBootstrap from 'react-bootstrap';

// App component - represents the whole app
export default class App extends Component {
  render() {
    return (
      <div>
        <h1>Testing</h1>
        <ReactBootstrap.Button bsStyle="success">Click Me</ReactBootstrap.Button> 
      </div>
    );
  }
}

Result:

Of course, you can use it like this:

import ReactBootstrap from 'react-bootstrap';
const { Button } = ReactBootstrap;
...
<Button bsStyle="...">...</Button>

or like this:

import { Button } from 'react-bootstrap';
...
<Button bsStyle="...">...</Button>

Answer 2

After reading the docs for the package, I believe you can do something like this:

import React, { Component } from 'react';
import { Button } from 'bootstrap';


// App component - represents the whole app
export default class App extends Component {



  render() {
    return (
      <div>
        <h1>Testing</h1>
        <Button /> 
      </div>
    );
  }
}