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?
-r react -r ./src/App
on the command line, (not very familiar with gulp).