Component undefined in ReactJS

Question

I'm playing around with ReactJS. I have defined three components, which are nested:

UserProfile.jsx

var React = require('react');

var UserProfile = React.createClass({

  getInitialState: function() {
    return {
      username: "zuck"
    };
  },

  render: function() {
    return (
      <UserProfile>
        <ProfileImage username={this.props.username}/>
        <ProfileLink username={this.props.username}/>
      </UserProfile>
    );
  }

});
React.render(<UserProfile username="zuck"/>, document.body);

module.exports = UserProfile;

ProfileLink.jsx

var React = require('react');

var ProfileLink = React.createClass({

  render: function() {
    return (
      <a href="//facebook.com/{this.props.username}">{this.props.username}</a>
    );
  }

});

module.exports = ProfileLink;

ProfileImage.jsx

var React = require('react');

var ProfileImage = React.createClass({

  render: function() {
    return (
      <img src="//graph.facebook.com/{this.props.username}/picture"/>
    );
  }

});

module.exports = ProfileImage;

My html file basically only includes the three jsx files (btw, is there a way to bundle all these into a single request during development?)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React FB Link</title>
</head>
<body>
  <script type="text/javascript" src="UserProfile.jsx"></script>
  <script type="text/javascript" src="ProfileLink.jsx"></script>
  <script type="text/javascript" src="ProfileImage.jsx"></script>
</body>
</html>

I'm using beefy to handle and serve the JSX files, using beefy *.jsx 8000 -- -t reactify.

The resulting files are (in truncated form):

Loading the html page results in an error:

Uncaught ReferenceError: ProfileImage is not defined with reference to line 15 in UserProfile.jsx:

React.createElement(ProfileImage, {username: this.props.username}),

I would use a bundler and then use var ProfileImage = require('ProfileImage'). — magnudae
– magnudae, Commented Mar 30, 2015 at 10:00

trekforever · Accepted Answer · 2015-03-30 09:37:00Z

3

You might need to load ProfileImage.jsx and ProfileLink.jsx before your UserProfile.jsx since right now the page is parsing Userprofile.jsx first and it doesn't know what ProfileImage mean (because you haven't loaded it yet)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React FB Link</title>
</head>
<body>
  <script type="text/javascript" src="ProfileLink.jsx"></script>
  <script type="text/javascript" src="ProfileImage.jsx"></script>
  <script type="text/javascript" src="UserProfile.jsx"></script>
</body>
</html>

You can use any module bundler to bundle up your files (Browserify, Gulp, Webpack) into one single file as entry point

answered Mar 30, 2015 at 9:37

trekforever

3,93227 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Component undefined in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related