Keith Jackson Keith Jackson - 1 month ago 26
React JSX Question

Excluding libraries from browserify - Unable to reference react.js / Uncaught Error: Cannot find module 'react'

I have been trying to get a gulpfile set up to use Browserify to generate a compiled file that does not include the 3rd party elements. I have a distinct problem with react.js.

If I exclude it (as my gulpfile below indicates when 'build-js-prod' is run) then I get an annoying warning saying I should use the production version of React. If I add the react URL seperately then I get an error saying...

Uncaught Error: Cannot find module 'react'

Here is my gulpfile (edited)

'use strict';

var gulp = require('gulp'),
sass = require('gulp-sass'),
clean = require('gulp-clean'),
uglify = require('gulp-uglify'),
sourcemaps = require("gulp-sourcemaps"),
concat = require("gulp-concat-js"),
rename = require("gulp-rename"),
browserify = require('browserify'),
watchify = require('watchify'),
reactify = require('reactify'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
jslint = require('gulp-eslint'),
gutil = require('gulp-util');

const PATHS = {
scriptsSrcPath: 'Scripts/',
sassSrcPath: 'Sass/',
buildPath: 'wwwroot/',
scriptsBuildPath: 'wwwroot/js/',
sassBuildPath: 'wwwroot/css/',
fontsBuildPath: 'wwwroot/fonts/',
namespace: '<%= pkg.name %>'
};

const LIBS = ['jquery', 'react', 'react-dom', 'bootstrap'];

// JS tasks

var bundle = function(bundler) {
return bundler.bundle()
.pipe(source('modle-portal.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(uglify())
.on('error', gutil.log)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(PATHS.scriptsBuildPath));
}

gulp.task('js-clean', function () {
return gulp.src(PATHS.scriptsBuildPath, { read: false })
.pipe(clean({ force: true }));
});

gulp.task("js-lint", function () {
return gulp.src([PATHS.scriptsSrcPath + '*.{js,jsx}', PATHS.scriptsSrcPath + '**/*.{js,jsx}'])
.pipe(jslint())
.pipe(jslint.format())
.pipe(jslint.failAfterError());
});

gulp.task("js-build-vendors", ['js-clean'], function () {
var bundler = browserify({
entries: [PATHS.scriptsSrcPath + 'app.js'],
transform: [reactify],
debug: true,
cache: {}, packageCache: {}, fullPaths: true
});

gulp.src('node_modules/jquery/dist/*')
.pipe(gulp.dest(PATHS.scriptsBuildPath));

var bundler = browserify({
debug: false
});

LIBS.forEach(function (lib) {
bundler.require(lib);
});

return bundler.bundle()
.pipe(source('vendors.js'))
.pipe(buffer())
.pipe(uglify())
.on('error', gutil.log)
.pipe(gulp.dest(PATHS.scriptsBuildPath));
});

gulp.task("js-build-prod", ['js-lint', 'js-build-vendors'], function () {
var bundler = browserify({
entries: [PATHS.scriptsSrcPath + 'app.js'],
transform: [reactify],
debug: false,
cache: {}, packageCache: {}, fullPaths: true
});

LIBS.forEach(function (lib) {
bundler.external(require.resolve(lib, { expose: lib }));
});

return bundle(bundler);
});


I have my HTML set up as follows (this generates the nagging error about using production React)...

<script src="~/js/jquery.js"></script>
<script src="~/js/vendors.js"></script>
<script src="~/js/modle-portal.js" asp-append-version="true"></script>


or like this (which generates the 'Cannot find' error)...

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://unpkg.com/react@15.3.2/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js">





I am at a loss as to how to proceed with this now.

Answer

I fixed this in the end within my gulpfile with 2 key changes.

require('babel-core/register');

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    clean = require('gulp-clean'),
    uglify = require('gulp-uglify'),
    sourcemaps = require("gulp-sourcemaps"),
    browserify = require('browserify'),
    shim = require('browserify-shim'),
    watchify = require('watchify'),
    reactify = require('reactify'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    jslint = require('gulp-eslint'),
    gutil = require('gulp-util'),
    mocha = require('gulp-mocha'),
    babel = require('gulp-babel');

const EXT_LIBS = ['jquery', 'bootstrap', 'react', 'react-dom'];
const IG_LIBS = [];
const VDR_COMPILED_LIBS = [];


// JS tasks

var buildJs = function (debugMode, watch, bundleCallback) {
    var entryPoint = PATHS.scriptsSrcPath + 'app.js';

    var bundler = browserify({
        entries: [entryPoint],
        transform: [reactify, shim],
        debug: debugMode,
        cache: {}, packageCache: {}, fullPaths: true
    });

        EXT_LIBS.forEach(function (lib) {
            bundler.external(require.resolve(lib, { expose: lib }));
        });

        IG_LIBS.forEach(function (lib) {
            bundler.ignore(require.resolve(lib, { expose: lib }));
        });

    if (watch) {
        bundler = watchify(bundler);

        bundler.on('update', function () {
            bundleCallback(bundler);
        });

        bundler.on('log', function (msg) {
            gutil.log(msg);
        });
    }

    return bundleCallback(bundler);
}

The first key element was enabling 'external' rather than 'ignore' for the unneeded files but keeping the

require('react');

line in the modules. The second key element was passing the browserify-shim transform into the options for browserify.