Shim code is missing from shimmed dependency

[MarkLeMerise]

I have set up a reduced case repo to demonstrate this issue using jQuery Bootstrap.

I have set up the shim as such in my package.json:

  "browserify-shim": {
    "bootstrap": {
      "depends": ["jquery:jQuery"]
    }
  }

In a nutshell, I am trying to create two bundles: vendor and app. vendor includes bootstrap and jquery, and app externalizes (and excludes) bootstrap and jquery.

My app bundle does a simple require and test for bootstrap:

    require('bootstrap');
    console.log(require('jquery').fn.affix);

However, I receive an error from inside the shimmed bootstrap module:

Uncaught Error: Bootstrap's JavaScript requires jQuery

I noticed that the shimming code which would expose the jquery module as jQuery to the bootstrap module is missing from the beginning of the bootstrap definition.

Am I missing something in my configuration or in the execution of browserify?

Update

The source of the problem seems to lie in how Browserify (or node) resolves the aliases given on the browser field in package.json. From what I can gather, if there is a package.json anywhere in the path traversal of an alias, it will be treated as if it came from node_modules, and thus not passed to the transform.

This does not seem to be a browserify-shim issue (sorry), but rather higher up in the Browserify functionality. I only saw the symptom in the shim because it was not adding the shimming code.

[bendrucker]

From what I can gather, if there is a package.json anywhere in the path traversal of an alias, it will be treated as if it came from node_modules, and thus not passed to the transform.

Confirmed. This is only an issue when directly adding the code to be shimmed to the bundle via add or require. https://github.com/bendrucker/browserify-shim-issue-152 shows this directly.

Definitely file this one with browserify and link it here. Would really like to get external bundling working properly.

[MarkLeMerise]

Thanks for the input, Ben. I will pass this along to the Browserify project.

[lsapan]

@MarkLeMerise did you ever find a solution for this? Our build script makes heavy use of .require('xxx', {expose: 'xxxx'}); because we need to bundle a ton of files that are required dynamically at runtime.

[MarkLeMerise]

@lsapan See my workaround on substack/node-browserify#1207

[lsapan]

Hey thanks for replying. We actually got it working yesterday by making sure anything that needs to be shimmed is included in the browser property.

[ldong]

I was able to get it working via

  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browser": {
    "jquery": "./bower_components/jquery/dist/jquery.js"
  },
  "browserify-shim": {
    "jquery": "$",
    "bootstrap": {
      "depends": [
        "jquery"
      ]
    }
  },

Good luck.

Credit:

1. SO: Using browserify with npm jQuery and non-npm plugins
2. SO: Browserify with twitter bootstrap

[ktersius]

So this is still not fixed spent hours searching for why code was not being shimmed.

Also having my dependency in the browser field does not fix this issue if the dependency is located in the node_modules directory.

Tested and the only things that worked for me was:

1. Copy the .js file into another folder that is not ./node_modules and reference that in the browser alias.
2. Do not try to split up the depedency into another bundle with the bundle require/external methods.

[lsapan]

Any chance you can post your package.jdon, shim and build script/command?

[powderflask]

For others who struggled with related issues, my issue was the transform was not being applied globally. The "expose Globals" settings documented here: https://github.com/thlorenz/browserify-shim#a-expose-global-variables-via-global works perfectly, but does NOT apply the transform (and thus expose the globals) to dependencies in node_modules.

To do so, simply add --global option to transform in browserify commend, E.g., browserify my_app.js -t [browserify-shim --global] ... As far as i can tell, there is no way to codify this option in package.json -- it can only be specified on the command line.