Browserify cannot find children's required dependencies - npm

Question

I have a repository with a simple index.js:
(function() {
"use strict";
var angular = require('angular');
})();
I use gulp to bundle (full file down below in Edit):
gulp.task('browserify', function() {
return browserify({
entries: './dist/childRepository.js',
insertGlobals : true
})
.transform(to5ify)
.bundle()
.on('error', errorWarning)
.pipe(source('childRepository.bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist'))
});
This creates my bundle file in the correct order and runs just fine in the browser. Now in another repository I made the first a dependency using npm.
npm install childRepository.git --save
In the second repository I created another index.js:
(function() {
"use strict";
var angular = require('angular');
var childRepository = require('childrepository');
})();
I have a similar gulpfile for browserify and bundling however it fails with an error:
events.js:160
throw er; // Unhandled 'error' event
^
Error: Cannot find module './angular' from '/Users/jrquick/uabshp/childRepository/dist'
at /Users/jrquick/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:21
at load (/Users/jrquick/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
at onex (/Users/jrquick/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
at /Users/jrquick/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:123:15)
I have tried several setups, adding source maps, flipping flags but cannot get around this error. Does anyone have any advice? Thanks.
Edit, my package.json for the childRepository:
{
"name": "childRepository",
"version": "1.0.0",
"description": "",
"main": "./dist/childRepository.bundle.js",
"directories": {
"example": "example"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+ssh://git#bitbucket.org/uabshp/childRepository.git"
},
"author": "",
"license": "ISC",
"homepage": "https://bitbucket.org/uabshp/childRepository#readme",
"devDependencies": {
"6to5ify": "^4.1.1",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-jshint": "^2.0.4",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.0.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-uglify": "^2.0.0",
"jshint": "^2.9.4",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
},
"dependencies": {
"angular": "^1.6.0"
}
}
package.json for paren repository:
{
"name": "parentrepository",
"version": "1.0.0",
"description": "### How do I get set up? ###",
"main": "./dist/parentRepository.bundle.js",
"directories": {
"example": "example"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+ssh://git#bitbucket.org/uabshp/parentRepository.git"
},
"author": "",
"license": "ISC",
"homepage": "https://bitbucket.org/uabshp/parentRepository#readme",
"devDependencies": {
"6to5ify": "^4.1.1",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-jshint": "^2.0.4",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.0.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-uglify": "^2.0.0",
"jshint": "^2.9.4",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
},
"dependencies": {
"angular": "^1.6.4",
"childRepository": "git+ssh://git#bitbucket.org/uabshp/childRepository.git"
}
}
gulpfile.js (same for both besides name):
var gulp = require('gulp');
var concat = require('gulp-concat');
var browserify = require('browserify');
var buffer = require('vinyl-buffer');
var jshint = require('gulp-jshint');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var source = require('vinyl-source-stream');
var sourcemaps = require('gulp-sourcemaps');
var to5ify = require('6to5ify');
var uglify = require('gulp-uglify');
gulp.task('sass', function() {
return gulp.src('sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('dist/css'));
});
gulp.task('lint', function() {
return gulp.src('src/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
gulp.task('scripts', function() {
return gulp.src('src/*.js')
.pipe(concat('childRepository.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('childRepository.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('browserify', function() {
return browserify({
entries: './dist/childRepository.js',
insertGlobals: true,
standAlone: true
})
.transform(to5ify)
.bundle()
.on('error', errorWarning)
.pipe(source('childRepository.bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist'))
});
gulp.task('watch', function() {
gulp.watch('src/*.js', ['build']);
gulp.watch('dist/childRepository.js', ['browserify']);
gulp.watch('sass/*.sass', ['sass']);
});
gulp.task('build', [
'sass',
'lint',
'scripts',
'browserify'
]);
gulp.task('default', [
'build',
'watch'
]);
function errorWarning(error) {
console.log(error.toString());
this.emit('end');
}

Answer 1

I solved this by install derequire: npm install gulp-derequire --save-dev
Then added to my gulpfile.js:
gulp.task('browserify', function() {
return browserify('./dist/uabError.js')
.transform(to5ify)
.bundle()
.on('error', errorWarning)
.pipe(source('uabError.bundle.js'))
.pipe(derequire())
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist'))
});
This does cause a problem where I get a warning about attempting to load angular more than once. I also have another work around that does not require derequire. Just set ignoreMissing to true.
gulp.task('browserify', function() {
return browserify('./dist/uabError.js', { ignoreMissing: true })
.transform(to5ify)
.bundle()
.on('error', errorWarning)
.pipe(source('uabError.bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist'))
});