browserify-shim failed on signalR lib

[felixbillon]

Hi everyone,

I'm using gulp + browserify to bundle my source but i got always the same error : jQuery was not found. Please ensure jQuery is referenced before the SignalR client JavaScript file. SignalR get $ = undefined...

I split my source into two bundle : vendor and app. Vendor bundle get lib's id from packages.json and the bundle require it. App bundle get main entry and i passe id's lib to this bundle with bundle.external.

Here my packages.json :

  "browser": {
    "angular-notify": "./node_modules/angular-notify/dist/angular-notify.js",
    "angular-i18n": "./node_modules/angular-i18n/angular-locale_fr.js",
    "jquery": "./node_modules/jquery/dist/jquery.js",
    "signalR": "./node_modules/ms-signalr-client/jquery.signalr-2.2.0.js",
    "moment": "./node_modules/moment/moment.js",
    "moment-business": "./Scripts/Vendor/js/moment-business.js"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery": "$",
    "signalR": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "moment": "moment"
  }

Here my gulp taks :

'use strict';

import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import browserify from 'browserify';
import browserifyInc from 'browserify-incremental';
import ngHtml2Js from 'browserify-ng-html2js';
import shim from 'browserify-shim';
import xtend from 'xtend';
import tsify from 'tsify';
import babelify from 'babelify';
import minifyify from 'minifyify';
import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';
import browserSync from 'browser-sync';
import packageJson from './package.json';

const $ = gulpLoadPlugins();
let bs = browserSync.create();

let dependenciesCss = [
  'bootstrap',
  'font-awesome',
  'animate.css'
];

let externalDependenciesjs = [
  'signalR',
  'moment-business'
];

let dependenciesJs = Object.keys(packageJson.dependencies).filter(
  key => (
    dependenciesCss.every(
      libCssName => (key.trim() !== libCssName)
    )
  )
);

dependenciesJs = dependenciesJs.concat(externalDependenciesjs);

/*************************************
 *          SCRIPTS (build)          *
 *************************************/

let extensions = ['.js', '.json', '.ts'];

let bundler = browserify(xtend(browserifyInc.args, {
    entries: 'Scripts/App/app.ts',
    debug: true,
    extensions,
    cache: {},
    packageCache: {},
    fullPaths: true
  }))
  .external(dependenciesJs)
  .plugin(tsify, {
    target: 'es6'
  })
  .transform(babelify.configure({
    extensions,
  }))
  .plugin(minifyify, {
    map: 'app.min.js.map',
    output: 'Scripts/Dist/app.min.js.map'
  });

function compile() {

  bundler.on('log', $.util.log);

  browserifyInc(bundler, {
    cacheFile: './.tmp/browserify-cache.json'
  });

  $.util.log('Bundling JS ...');

  return bundler.bundle()
    .pipe($.plumber({
      errorHandler: browserifyError
    }))
    .on('error', browserifyError)
    .pipe(source('app.min.js'))
    .pipe(buffer())
    .pipe($.size({
      title: 'scripts'
    }))
    .pipe(gulp.dest('Scripts/Dist'))
    .pipe($.if(bs.active, bs.stream({
      once: true
    })));
}

let bundlerVendor = browserify(xtend(browserifyInc.args, {
    debug: true,
    extensions,
    cache: {},
    packageCache: {},
    fullPaths: true
  }))
  .require(dependenciesJs)
  .plugin(minifyify, {
    map: 'vendor.min.js.map',
    output: 'Scripts/Dist/vendor.min.js.map'
  });

function compileVendor() {

  bundlerVendor.on('log', $.util.log);

  browserifyInc(bundlerVendor, {
    cacheFile: './.tmp/browserify-vendor-cache.json'
  });

  $.util.log('Bundling vendor JS ...');

  return bundlerVendor.bundle()
    .pipe($.plumber({
      errorHandler: browserifyError
    }))
    .on('error', browserifyError)
    .pipe(source('vendor.min.js'))
    .pipe(buffer())
    .pipe($.size({
      title: 'scripts vendor'
    }))
    .pipe(gulp.dest('Scripts/Dist'))
    .pipe($.if(bs.active, bs.stream({
      once: true
    })));
}

function browserifyError(err) {
  error(err);
  this.end();
}

I already try to use browserify-shim transform with option global but this not work too.

[bendrucker]

Need a simple runnable example to investigate this. Ideally it should not use Gulp or any other deps, just jQuery + SignalR.

[felixbillon]

My mistake :( I solve my problem thanks to process.env.BROWSERIFYSHIM_DIAGNOSTICS=1 !

I was using a local version of signalR, and then I switch to use a version on NPM... So I reference it twice on my vendor's bundle dependencies.