如何查找原因-错误：找不到模块

Question

I'm using gulp with browserify, to bundle an app. While the build is functional, I continually receive the following error message:

Error: Cannot find module 'function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}'

Does anyone have any ideas what could be causing the error or how to debug it? The only time the error does NOT appear is when there are zero require statements in the main js file. For reference below are the gulp and main.js files:

gulpfile

var gulp, browserify, stringify, sass, concat, uglify, source, buffer;

gulp = require('gulp');
browserify = require('gulp-browserify');
stringify = require('stringify');
sass = require('gulp-sass');
concat = require('gulp-concat');
uglify = require('gulp-uglify');

function handleError(err) {
    console.log(err.toString());
}

gulp.task('browserify', function () {
    return gulp.src('./src/js/**/*.js', { read: false })
               .pipe(browserify({
                   transform: [stringify({
                       extensions: ['.html'],
                       minify: true
                   })]
               }))
               .on('error', handleError)
               .pipe(concat('main.js'))
               .pipe(gulp.dest('./bin/js'));
});

gulp.task('sass', function() {
    return gulp.src('./src/scss/**/*.scss')
               .pipe(sass())
               .on('error', handleError)
               .pipe(concat('main.css'))
               .pipe(gulp.dest('./bin/css'));
});

gulp.task('index', function () {
  return gulp.src('./src/index.html')
             .pipe(gulp.dest('./bin'));
});

gulp.task('default', ['browserify', 'sass', 'index']);

gulp.task('watch', function() {
  gulp.watch('./src/js/**/*.js', ['browserify']);
  gulp.watch('./src/scss/**/*.scss', ['sass']);
  gulp.watch('./src/index.html', ['index']);
  gulp.watch('./src/html/**/*.html', ['browserify']);
});

main.js

'use strict';

var $ = require('jquery'),
    ko = require('knockout'),
    greet = require('./components/greet');

window.$ = window.jQuery = $;

function AppViewModel() {
    var self = this;

    self.userName = ko.observable('');
}

ko.components.register('greet', greet);
ko.applyBindings(new AppViewModel());

Answer 1

This happens when you concat multiple browserified files. To solve that you have simply to concat before browserify

gulp.task('browserify', function () {
    return gulp.src('./src/js/**/*.js', { read: false })
               .pipe(concat('main.js'))
               .pipe(browserify({
                   transform: [stringify({
                       extensions: ['.html'],
                       minify: true
                   })]
               }))
               .on('error', handleError)
               .pipe(gulp.dest('./bin/js'));
});