Gulp + browserify + reactjs, Uncaught ReferenceError: React undefined

Question

I am trying to execute the workflow suggested in this file: https://gist.github.com/nateajohnson/4d16df279d2e3d2b6b16 , so that in the end I get two separate .js files: one for the vendor vendors and the other for my own code.

My Gulpfile.js:

var gulp = require('gulp'), // ... there shouldn't be any problems gulp.task('build-vendor', function() { var b = browserify({ debug: false}); b.require(nodeResolve.sync('jquery'), { expose: 'jquery' }); b.require(nodeResolve.sync('react'), { expose: 'react' }); b.require(nodeResolve.sync('react/addons'), { expose: 'react/addons' }); b.require(nodeResolve.sync('react-select'), { expose: 'react-select' }); var stream = b.bundle() .pipe(source('vendor.js')) .pipe(gulp.dest('assets/build/js')) .pipe(buffer()) .pipe(uglify()) .pipe(rename('vendor.min.js')) .pipe(gulp.dest('assets/build/js')) .pipe(gzip()) .pipe(gulp.dest('assets/build/js')); return stream; }) ; gulp.task('build-app', function() { var b = browserify('assets/dev/js/app.js', { debug: false }); b.external('jquery'); b.external('react'); b.external('react-select'); var stream = b.transform(babelify, { stage: 0 }) .bundle() .on('error', function(e){ console.log(e.message); this.emit('end'); }) .pipe(source('bundle.js')) .pipe(gulp.dest('assets/build/js')); return stream; }); 

When I try to use the React variable in my own code, I get an error:

Untrained ReferenceError: React not defined

I can get rid of this by turning

 var React = require('react'); 

in each of my js files that use reaction, or by including

 <script src="https://fb.me/react-0.13.3.min.js"></script> 

in my HTML (which is clearly not a very good solution).

Just in case, I clicked this project on github: https://github.com/jehaby/ireact/tree/master/kindle

So my questions are why I get this error and how to solve it correctly (I'm sure there are some)? I think these might be silly questions, but I'm new to these tools. I have already spent several hours trying to understand what is wrong, and now I feel that I'm stuck. We will be very grateful for any help.

Answer 1

Using a browser and babelify, you must declare your dependencies in each file:

 //node style var React = require('react') // ES 2015 modules import React from 'react'; 

Take a look at the available examples of working with ES2015 and React modules:

https://github.com/lukehoban/es6features#modules

https://github.com/erikras/react-redux-universal-hot-example/blob/master/src%2Fcomponents%2FCounterButton.js

Answer 2

Identify

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

this is global javascript value in app.js than putting 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 the latter, put main.js in the HTML, and it should work.

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