Chapter 5: Warning: React.createElement: type is invalid

[Schokohuetchen]

I've seen people having issues with this code as well but I couldn't find a solution.

I'm getting the following errors in the console after running the code:

I thought I had a typo somewhere but this also happens with the code from this repository.

package.json:

{
  "name": "snapterest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-react": "^6.24.1",
    "babelify": "^7.3.0",
    "browserify": "^14.3.0",
    "gulp": "^3.9.1",
    "minimatch": "^3.0.4",
    "vinyl-source-stream": "^1.1.0"
  },
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "snapkite-stream-client": "^1.0.3"
  }
}

gulpfile.js:

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

gulp.task('default', function () {
  return browserify('./source/app.js')
    .transform(babelify,{presets: ["react"]})
    .bundle()
    .pipe(source('snapterest.js'))
    .pipe(gulp.dest('./build/'));
});

Application.react.js:

var React = require('react');
var Stream = require('./Stream.react');
var Collection = require('./Collection.react');

var Application = React.createClass({

    getInitialState: function () {
        return {
            collectionTweets: {}
        };
    },

    addTweetToCollection: function (tweet) {
        var collectionTweets = this.state.collectionTweets;

        collectionTweets[tweet.id] = tweet;

        this.setState({
            collectionTweets: collectionTweets
        });
    },

    removeTweetFromCollection: function (tweet) {
        var collectionTweets = this.state.collectionTweets;

        delete collectionTweets[tweet.id];

        this.setState({
            collectionTweets: collectionTweets
        });
    },

    removeAllTweetsFromCollection: function () {
        this.setState({
            collectionTweets: {}
        });
    },

    render: function () {
        return (
            <div className="container-fluid">
                <div className="row">
                    <div className="col-md-4 text-center">

                        <Stream onAddTweetToCollection={this.addTweetToCollection}/>

                    </div>
                    <div className="col-md-8">

                        <Collection
                            tweets={this.state.collectionTweets}
                            onRemoveTweetFromCollection={this.removeTweetFromCollection}
                            onRemoveAllTweetsFromCollection={this.removeAllTweetsFromCollection} />

                    </div>
                </div>
            </div>
        );
    }
});

module.exports = Application;

app.js:

var React = require('react');
var ReactDOM = require('react-dom');

var Application = require('./components/Application.react');

ReactDOM.render(<Application />, document.getElementById('react-application'));

Stream.react.js:

var React = require('react'),
    SnapkiteStreamClient = require('snapkite-stream-client'),
    StreamTweet = require('./StreamTweet.react'),
    Header = require('./Header.react'),
    Stream = React.createClass({

        getInitialState: function() {
            return {
             tweet: null
            };
        },

        componentDidMount: function() {
            SnapkiteStreamClient.initialiseStream(this.handleNewTweet);
        },

        componentWillUnmount: function() {
            SnapkiteStreamClient.destroyStream();
        },

        handleNewTweet: function(tweet) {
            this.setState({
               tweet: tweet
            });
        },

        render: function() {
            var tweet = this.state.tweet;

            if(tweet) {
                return (
                  <StreamTweet
                    tweet={tweet}
                    onAddTweetToCollection={this.props.onAddTweetToCollection}
                  />
                );
            }

            return (
                <Header
                    text="Waiting for public photos from Twitter..."
                />
            );
        }
    });

module.exports = Stream;

StreamTweet.react.js:

var React = require('react'),
    ReactDOM = require('react-dom'),
    Header = require('./Header.react'),
    Tweet = require('./Tweet.react'),
    StreamTweet = React.createClass({

        getInitialState: function() {
          console.log('[Snapterest] StreamTweet: 1. Running getInitialState()');

          return {
              numberOfCharactersIsIncreasing: null,
              headerText: null
          };
        },

        componentDidMount: function() {
            console.log('[Snapterest] StreamTweet: 2. Running componentWillMount()');

            this.setState({
                numberOfCharactersIsIncreasing: true,
                headerText: 'Latest public photo from Twitter'
            });

            window.snapterest = {
                numberOfReceivedTweets: 1,
                numberOfDisplayedTweets: 1
            };
        },



        render: function() {
            console.log('[Snapterest] StreamTweet: Running render()');

            return (
                <section>
                    <Header text={this.state.headerText} />
                    <Tweet
                        tweet={this.props.tweet}
                        onImageClick={this.props.onAddTweetToCollection}
                    />
                </section>
            );
        }
    });

module.exports = StreamTweet;

[Lame-MaMmoth]

dunno... I had same error, but i forgot do module.exports = in one of *.react.js file. Error was disappeared after i fixed that.