gulp + browserify + reactjs, Uncaught ReferenceError: React is not defined

Question

I'm trying to follow workflow suggested in this file: https://gist.github.com/nateajohnson/4d16df279d2e3d2b6b16 , so that in the end I get two separate .js files: one for vendor libs 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'm trying to use React variable in my own code, I get the error:

Uncaught ReferenceError: React is not defined

I can get rid of this either by including

var React = require('react');

in each of my js files which use react, or by including

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

in my HTML (which obviously not very good solution).

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

So my questions is why do I get this error and how to solve it the right way ( I'm sure there is some )? I believe it might be stupid questions, but I'm new to this tools. I've already spent several hours trying to figure out what's wrong and now feel kinda stuck. Will be very grateful for any help.

Yevgen Safronov · Accepted Answer · 2015-08-06 20:27:30Z

4

With browserify and babelify you should declare your dependencies in each file:

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

Take a look on available examples how to work with ES2015 modules and React:

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

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

answered Aug 6, 2015 at 20:27

Yevgen Safronov

4,0331 gold badge29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ahll · Accepted Answer · 2016-06-23 21:42:39Z

1

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.

answered Jun 23, 2016 at 21:42

ahll

2,4371 gold badge21 silver badges23 bronze badges

Collectives™ on Stack Overflow

gulp + browserify + reactjs, Uncaught ReferenceError: React is not defined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related