I'm trying to use gulp-browserify to generate a bundle.js file that can be included to the client's browser and begin rendering React components.
Here is my App.js file:
/** @jsx React.DOM */
var React = require('react');
var App = React.createClass({
render: function() {
return <h1>Hello {this.props.name}!</h1>;
}
});
module.exports = App;
And my package.json:
"name":"hellosign-gulp",
"version":"0.1.1",
"dependencies": {
"gulp": "3.5.x",
"gulp-browserify": "0.5.0",
"reactify": "~0.8.1",
"react": "^0.10.0",
"gulp-react": "0.2.x"
}
}
and my gulpfile
var gulp = require('gulp'),
react = require('gulp-react'),
browserify = require('gulp-browserify');
gulp.task('brow-test', function() {
// Single entry point to browserify
gulp.src('./src/App.js', {read: false})
.pipe(browserify({
insertGlobals : true,
transform: ['reactify'],
extensions: ['.jsx'],
debug :false.
}))
.pipe(gulp.dest('.'))
});
Now when I run 'brow-test' I rename the output file to bundle.js and include it with the HTTP response for the browser. The bundle.js file is quite large so I won't include it here but the browser ends up throwing an error
Uncaught ReferenceError: require is not defined
I have this exact same setup running correctly with the regular version of browserify using these commands
browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js
And then I don't get the error. Why is gulp-browserify not creating the require shim correctly?
UPDATE: I wrote a new post on this, using different packaging tools. It also includes an optimized example of browserify: Choosing the correct packaging tool for React JS
To anyone reading this post to get a React JS workflow up and running:
I had a lot of issues getting this to work, and ended up writing a post on it: React JS and a browserify workflow. This is my solution, making sure that you can transform your JSX and handle separate watching of other files.
var gulp = require('gulp');
var source = require('vinyl-source-stream'); // Used to stream bundle for further handling etc.
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var concat = require('gulp-concat');
gulp.task('browserify', function() {
var bundler = browserify({
entries: ['./app/main.js'], // Only need initial file, browserify finds the deps
transform: [reactify], // We want to convert JSX to normal javascript
debug: true, // Gives us sourcemapping
cache: {}, packageCache: {}, fullPaths: true // Requirement of watchify
});
var watcher = watchify(bundler);
return watcher
.on('update', function () { // When any files update
var updateStart = Date.now();
console.log('Updating!');
watcher.bundle() // Create new bundle that uses the cache for high performance
.pipe(source('main.js'))
// This is where you add uglifying etc.
.pipe(gulp.dest('./build/'));
console.log('Updated!', (Date.now() - updateStart) + 'ms');
})
.bundle() // Create the initial bundle when starting the task
.pipe(source('main.js'))
.pipe(gulp.dest('./build/'));
});
// I added this so that you see how to run two watch tasks
gulp.task('css', function () {
gulp.watch('styles/**/*.css', function () {
return gulp.src('styles/**/*.css')
.pipe(concat('main.css'))
.pipe(gulp.dest('build/'));
});
});
// Just running the two tasks
gulp.task('default', ['browserify', 'css']);
To solve the issue of using the React JS DEV-TOOLS in chrome, this is what you have to do in your main.js file:
/** @jsx React.DOM */
var React = require('react');
// Here we put our React instance to the global scope. Make sure you do not put it
// into production and make sure that you close and open your console if the
// DEV-TOOLS does not display
window.React = React;
var App = require('./App.jsx');
React.renderComponent(<App/>, document.body);
I hope this will help you get going!