gulp-browserify output different than it should be

Question

I am using gulp with browserify to concatenate, babelify, and browserify several js libraries. This is in my gulpfile.js:

gulp.task('scripts', function () {
  var b = browserify({
    entries: ['src/scripts/modernizr.js', 'src/scripts/main.js'],
    debug: true
  }).transform(babelify, { presets: ["latest"] });

  return b.bundle()
    .pipe(source('main.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
        // Add transformation tasks to the pipeline here.
        // .pipe(uglify())
        .on('error', gutil.log)
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('build/js/'));
});

And my package.json:

"browserify": {
  "transform": [
    [
      "babelify",
      {
        "presets": [
          "es2015"
        ]
      }
    ]
  ]
}

In my main.js this is how I am including the libraries:

var $ = window.jquery;
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme';
// import spica from 'spica';
// import localsocket from 'localsocket';
var spica = require('spica');
var localsocket = require('localsocket');
import Pjax from 'pjax-api';

However I'm getting the following error in the console:

pjax-api.js:8Uncaught Error: Cannot find module 'spica'
    at s (http://localhost:8000/static/articles/build/js/main.js:1:148)
    at http://localhost:8000/static/articles/build/js/main.js:1:305
    at s (http://localhost:8000/static/articles/build/js/main.js:12699:28)
    at http://localhost:8000/static/articles/build/js/main.js:12708:24
    at Object.r.42.../../../lib/dom (http://localhost:8000/static/articles/build/js/main.js:14446:27)
    at s (http://localhost:8000/static/articles/build/js/main.js:12706:21)
    at http://localhost:8000/static/articles/build/js/main.js:12708:24
    at Object.r.41../gui (http://localhost:8000/static/articles/build/js/main.js:14429:25)
    at s (http://localhost:8000/static/articles/build/js/main.js:12706:21)
    at http://localhost:8000/static/articles/build/js/main.js:12708:24
    at Object.r.4../layer/interface/service/api (http://localhost:8000/static/articles/build/js/main.js:12738:25)
    at s (http://localhost:8000/static/articles/build/js/main.js:12706:21)
    at http://localhost:8000/static/articles/build/js/main.js:12708:24
    at Object.r.pjax-api../src/export (http://localhost:8000/static/articles/build/js/main.js:15017:22)
    at s (http://localhost:8000/static/articles/build/js/main.js:12706:21)
    at e (http://localhost:8000/static/articles/build/js/main.js:12715:9)
    at Object.3 (http://localhost:8000/static/articles/build/js/main.js:12717:2)
    at s (http://localhost:8000/static/articles/build/js/main.js:1:254)
    at http://localhost:8000/static/articles/build/js/main.js:1:305
    at Object.8.jquery (http://localhost:8000/static/articles/build/js/main.js:67062:16)
    at s (http://localhost:8000/static/articles/build/js/main.js:1:254)
    at e (http://localhost:8000/static/articles/build/js/main.js:1:425)
    at http://localhost:8000/static/articles/build/js/main.js:1:443

This is my directory structure:

articles
  |--gulpfile.js
  |--package_json
  |--build
  |  |--img
  |  |--css
  |  |--js
  |  |  |--main.js
  |--src
  |  |--img
  |  |--styles
  |  |--scripts
  |  |  |--main.js
  |--node_modules
  |  |--spica
  |  |--localsocket
  |  |--pjax-api
  |  |--etc.

What is going wrong?

The full output of main.js is too big to paste, but here it is in a gist . And here is the rest of my code in another gist .

Answer 1

Do you have the spica-package installed? If not, try this:

npm install --save-dev spica

Answer 2

if your 'spica' is present in the same directory where main.js is present then its fine or else

You have to specify

like this , var spica = require(dir_path/spica.js)

share your directory structure so i can provide you exact syntax.