Why I am getting "return props.href || props.onClick;" after moving to browserify?

Question

I had everything working in one .jsx file, but I lost in that long file. So I have divided everything in multiple .jsx and and used browserify/watchify to transform to .js

    watchify -t reactify marek.jsx -o 'exorcist bundle.js.map > bundle.js' -d -v

And now I am getting:

    TypeError: props is undefined in Firefox
    Uncaught TypeError: Cannot read property 'href' of undefined in Chrome

For line:

    ListGroup.js:75
    return props.href || props.onClick;

What I have done wrong?

bundle.jsx
       var React = require('react/addons');
       var Adresy = require('./Adresy.jsx');

        var App = React.createClass({
       displayName: "App",

       getInitialState: function() {
       return {data: []};
       },

       loadCommentsFromServer: function() {
       $.ajax({
       url: this.props.url,
       dataType: 'json',
       success: function(data) {
       this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err)
        {console.error(this.props.url,status, err.toString());
        }.bind(this)});
       },

       componentDidMount: function() {
       this.loadCommentsFromServer();
       setInterval(this.loadCommentsFromServer, this.props.pollInterval);
       },

       render: function() {
          return (
       <div className="container">

       <div className="row">
       <div className="col-md-6">
       <Adresy data={this.state.data.adresy}/>
       </div> 
       </div>
       </div>
       );
       }
       });
       React.render(
       <App url={res} pollInterval={20000} />,
       document.getElementById("content")
       );

Adresy.jsx

       var React = require('react');

       var Panel = require('react-bootstrap/lib/Panel');
       var ListGroup = require('react-bootstrap/lib/ListGroup');
       var ListGroupItem = require('react-bootstrap/lib/ListGroupItem');
       var ButtonToolbar = require('react-bootstrap/lib/ButtonToolbar');
       var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');


       var Adresy = React.createClass({

           getInitialState: function() {
             return {data: []};
           },

           getDefaultProps: function() {
           return {data: []};
           },

         render: function() {
           return (
             <Panel collapsible defaultCollapsed header='Adresy' className="TTemplate">
               <ListGroup fill>
                 {
                 this.props.data.map(function(value) {
                   return
                     <ListGroupItem key={value.adres_id} >
                       <div className="row">
                                     <div className="col-md-6">
                                       <p>{value.st}</p>

                </div>
              </ListGroupItem>
            })
          }
              </ListGroup>
             </Panel>
           );
         }
       });

       module.exports = Adresy;

Answer 1

You mentioned that this code is auto-generated, but the formatting looks very off. There is a bug in the code you've posted, but I'm not sure if it's a copy/paste/formatting thing, or something actually wrong in your code:

           <ListGroup fill>
             {
             this.props.data.map(function(value) {
               return
                 <ListGroupItem key={value.adres_id} >
                   <div className="row">
                                 <div className="col-md-6">
                                   <p>{value.st}</p>

            </div>
          </ListGroupItem>
        })
      }
          </ListGroup>

The map function will return undefined because return is on a line by itself:

function test() {
  return
    "testing";
}

alert(test());

Furthermore, I don't think the code as shown will even execute; if you line up the indentation, you can see you're missing a closing </div> JSX tag:

<ListGroup fill>
{this.props.data.map(function(value) {
  return (
    <ListGroupItem key={value.adres_id} >
      <div className="row">
        <div className="col-md-6">
          <p>{value.st}</p>
        </div>
      {/* missing div here */}
    </ListGroupItem>
  );
})}
</ListGroup>

I suspect that one of these issues, or something related, is causing ListGroup to not get the right children property, causing it to fail in its isAnchor method:

isAnchor(props){
  return (props.href || props.onClick);
}

which is called with the child's props:

let child = this.props.children;

childrenAnchors = this.isAnchor(child.props);

(and more; see the source for details).