Using gulp-browserify for my React.js modules I'm getting 'require is not defined' in the browser

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!

Run browserify directly on your file, and don't use use gulp-browserify plugin.

Referenced here: https://github.com/gulpjs/plugins/issues/47

"Browserify should be used as a standalone module. It returns a stream and figures out your dependency graph. If you need vinyl objects, use browserify + vinyl-source-stream"

you can achieve the results you want like this:

var source = require('vinyl-source-stream'), //<--this is the key browserify = require('browserify'); function buildEverything(){ return browserify({ //do your config here entries: './src/js/index.js', }) .bundle() .pipe(source('index.js')) //this converts to stream //do all processing here. //like uglification and so on. .pipe(gulp.dest('bundle.js')); } } gulp.task('buildTask', buildEverything); 

now, in your package Json,as you have - require react, browsierify and so on. You can also shim browserify here, use transforms or whatever.

 "dependencies": { "react": "^0.10.0", }, "devDependencies": { "browserify": "3.46.0", "browserify-shim": "3.x.x", } "browserify": { "transform": [ "browserify-shim" ] }, "browserify-shim": { "react": "React", } 

or jsut do like you are, and include react on the page you use it

var React = require('react'); 

or this if you want some of the handy helper stuff:

var React = require('react/addons'); 

But the bottom line is to use browserify directly in gulp and use the vinyl-source-stream to get into gulp pipeline.

I use this one for my react work .

var gulp = require('gulp'); var source = require('vinyl-source-stream'); 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: ['./assets/react/main.js'], transform: [reactify], debug: true, cache: {}, packageCache: {}, fullPaths: true }); var watcher = watchify(bundler); return watcher .on('update', function () { var updateStart = Date.now(); console.log('Updating!'); watcher.bundle() .pipe(source('main.js')) .pipe(gulp.dest('./assets/js/')); console.log('Updated!', (Date.now() - updateStart) + 'ms'); }) .bundle() .pipe(source('main.js')) .pipe(gulp.dest('./assets/js/')); }); gulp.task('default', ['browserify']);

Here's the gulp recipe for using browserify (with vinyl-transform and friends) to achieve the exact equivalent of

browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js` 

in src/App.js

/** @jsx React.DOM */ var React = require('react'); var App = React.createClass({ render: function() { return <h1>Hello {this.props.name}!</h1>; } }); module.exports = App; 

in gulpfile.js

var gulp = require('gulp'); var browserify = require('browserify'); var transform = require('vinyl-transform'); var reactify = require('reactify'); var rename = require("gulp-rename"); gulp.task('build', function () { // browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js var browserified = transform(function(filename) { return browserify() // -t reactify .transform(reactify) // -r react // update below with the correct path to react/react.js node_module .require('./node_modules/react/react.js', { expose: 'react'}) // -r ./src/App // filename = <full_path_to>/src/App.js .require(filename, {expose: 'src/App'}) .bundle(); }); return gulp.src('./src/App.js') .pipe(browserified) .pipe(rename('bundle.js')) .pipe(gulp.dest('../webapp/static/')); }); gulp.task('default', ['build']); 

I don't see directly what is wrong with your code, but I'm using this

gulp.src('./src/js/index.js') .pipe(browserify()) .on('prebundle', function(bundle) { // React Dev Tools tab won't appear unless we expose the react bundle bundle.require('react'); }) .pipe(concat('bundle.js'))

I used https://www.npmjs.org/package/gulp-react to transform the .jsx but nowadays I prefer to use regular javascript.

Let me know if this works for you, if not I could extract an example template...

package.json:

{ "devDependencies": { "gulp": "^3.8.11", "gulp-browserify": "^0.5.1", "reactify": "^1.1.0" }, "browserify": { "transform": [["reactify", { "es6": true }]], "insertGlobals": true, "debug": true } } 

gulpfile.js:

var gulp = require('gulp'); var browserify = require('gulp-browserify'); gulp.task('browserify', function() { return gulp.src("./assets/index.js") .pipe(browserify()) .pipe(gulp.dest("./www/assets")); }); 

Define

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

those global javascript value in a App.js, than put this

var stream = require('vinyl-source-stream'); var browserify = require('browserify'); browserify(source + '/app/app.js') // bundles it and creates a file called main.js .bundle() .pipe(stream('main.js')) // saves it the dest directory .pipe(gulp.dest(destination +'/assets/js')); 

in Gulpfile.js.

And for last, put main.js in HTML, and it should work.

The problem is if we use var React=require('react'), the object React is not visible from other script, but React=require('react') define a global value.