React & Meteor - Browserified Bootstrap : Error: Maximum call stack size exceeded

Question

I'm trying to use a browserified react bootstrap package to get the react bootstrap package but I'm getting the following error:

warning.js:45 Warning: Navbar(...): React component classes must extend React.Component.

Error: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
    at RegExp.[Symbol.replace] (native)
    at String.replace (native)
    at RegExp.<anonymous> (http://localhost:3000/packages/ecmascript-runtime.js?d552d50ef9d63d143f8f549245241748a4796cec:1842:49)
    at String.replace (http://localhost:3000/packages/ecmascript-runtime.js?d552d50ef9d63d143f8f549245241748a4796cec:1862:13)
    at escapeUserProvidedKey (http://localhost:3000/packages/tauruscolvin_meteor-react-bootstrap.js?1126cdfffe9377a633bd5bd48a0e26473d4bd449:32428:22)
    at wrapUserProvidedKey (http://localhost:3000/packages/tauruscolvin_meteor-react-bootstrap.js?1126cdfffe9377a633bd5bd48a0e26473d4bd449:32442:16)
    at traverseAllChildrenImpl (http://localhost:3000/packages/tauruscolvin_meteor-react-bootstrap.js?1126cdfffe9377a633bd5bd48a0e26473d4bd449:32567:13)
    at traverseAllChildrenImpl (http://localhost:3000/packages/tauruscolvin_meteor-react-bootstrap.js?1126cdfffe9377a633bd5bd48a0e26473d4bd449:32571:27)
    at traverseAllChildrenImpl (http://localhost:3000/packages/tauruscolvin_meteor-react-bootstrap.js?1126cdfffe9377a633bd5bd48a0e26473d4bd449:32571:27)
    at traverseAllChildrenImpl (http://localhost:3000/packages/tauruscolvin_meteor-react-bootstrap.js?1126cdfffe9377a633bd5bd48a0e26473d4bd449:32571:27)

This happens when I call any element from the bootstrap package, but as an example, here is the navbar:

NavBar = React.createClass({
 render(){
        var {Navbar,Button,Nav,NavItem} = ReactBootstrap;
        return(               
            <Navbar className="mainNav navbar navbar-inverse navbar-fixed-top">
                <div className="navbar-header">
                  <Button className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span className="sr-only">Toggle navigation</span>
                    <i className="fa fa-bars"></i>
                  </Button>
                  <a className="navbar-brand" href="/"><img className="logo" src="/img/full-logo.png" alt="logo"/></a>
                </div>
                <Nav className="collapse navbar-collapse" id="top-nav">
                    <ul className="nav navbar-nav navbar-left">
                        <NavItem className="active" href="#">For Me<span className="sr-only">(current)</span></NavItem>
                        <NavItem href="#">For You</NavItem>
                        <NavItem href="#">Contact</NavItem>
                    </ul>
                </Nav>
            </Navbar>
        );
    }  

});

I understand that there must be a loop somewhere causing the issue, but I can't figure out what exactly is the issue.

Any help very much welcome :)

UPDATE :

Even as I refactor to minimize any syntactic errors the error still appears:

NavBarWrapper = React.createClass({    
    render(){
        return(           
            <ReactBootstrap.Navbar >
                <ReactBootstrap.Nav >
                    Test
                </ReactBootstrap.Nav>
            </ReactBootstrap.Navbar>
        );        
    }      
});