failing to shim with browserify 6.3

[marcgreenstock]

It seems that browserify-rails doesn't play nicely with browserify 6.3 if browserify-shim is involved.

The shimmed modules do not load their respective dependencies with 6.3, however they load perfectly fine with 4.0.

I am observing this in an Isolated Engine, not sure if this will make any difference.

package.json

{
  "name": "dashboard",
  "dependencies": {
    "bootstrap": "^3.3.4",
    "browserify": "~> 6.3",
    "browserify-incremental": "^1.5.0",
    "browserify-shim": "^3.8.6",
    "coffeeify": "^1.1.0",
    "jquery": "^2.1.4"
  },
  "engines": {
    "node": ">= 0.10"
  },
  "browser": {
    "bootstrap.affix": "./node_modules/bootstrap/js/affix.js",
    "bootstrap.alert": "./node_modules/bootstrap/js/alert.js",
    "bootstrap.button": "./node_modules/bootstrap/js/button.js",
    "bootstrap.carousel": "./node_modules/bootstrap/js/carousel.js",
    "bootstrap.collapse": "./node_modules/bootstrap/js/collapse.js",
    "bootstrap.dropdown": "./node_modules/bootstrap/js/dropdown.js",
    "bootstrap.modal": "./node_modules/bootstrap/js/modal.js",
    "bootstrap.popover": "./node_modules/bootstrap/js/popover.js",
    "bootstrap.scrollspy": "./node_modules/bootstrap/js/scrollspy.js",
    "bootstrap.tab": "./node_modules/bootstrap/js/",
    "bootstrap.tooltip": "./node_modules/bootstrap/js/tooltip.js",
    "bootstrap.transition": "./node_modules/bootstrap/js/transition.js"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "bootstrap.affix": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "bootstrap.alert": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "bootstrap.button": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "bootstrap.carousel": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "bootstrap.collapse": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "bootstrap.dropdown": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "bootstrap.modal": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "bootstrap.popover": {
      "depends": [
        "jquery:jQuery",
        "bootstrap.tooltip"
      ]
    },
    "bootstrap.scrollspy": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "bootstrap.tab": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "bootstrap.tooltip": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "bootstrap.transition": {
      "depends": [
        "jquery:jQuery"
      ]
    }
  }
}

Engine.rb

config.browserify_rails.commandline_options = [
  '-t coffeeify',
  '--extension=".coffee"',
  '-t browserify-shim',
  '--fast'
]
config.browserify_rails.paths << lambda { |p| p.start_with?(Engine.root.to_s) }
config.browserify_rails.evaluate_node_modules = true
config.browserify_rails.use_browserifyinc = false
config.browserify_rails.node_bin = Engine.root.join('node_modules/.bin')

The result is bootstrap complaining that jQuery is not available. However when changing the browserify dependency in package.json to 4.0, there is no problem.

[cymen]

Have you tried your configuration outside of browserify-rails with browserify 6 and browserify-shim to confirm it's something within browserify-rails that is causing the issue? There has been some odd breakages beyond browserify 4 that I've seen and are hard to track down. browserify-rails is not doing a whole lot of processing of the JS -- it is basically taking the sprocketized-javascript that is emitted from a pipe and sending that pipe to browserify to resolve the CommonJS requires and exports. So not a lot of processing -- but you may find if you try piping the input JavaScript to browserify instead of reading it from a file, you reproduce the bug outside of browserify-rails.

[marcgreenstock]

@cymen just a moment, i'll try this now.

[marcgreenstock]

Yes it does.

test.coffee

require 'bootstrap.transition'

test command

BROWSERIFYSHIM_DIAGNOSTICS=1 ./node_modules/.bin/browserify ./test.coffee -t coffeeify --extension=".coffee" -t browserify-shim --fast -o test1.js

I firstly changed package.json to 4.0, npm install then ran the above command. Changed it to 6.3, npm install and the command again.

There were differences in the files, however they both included jQuery as a dependency.

[cymen]

You need to literally pipe the input into browserify though -- by using ./test.coffee, you're testing the path of browserify that reads from the fs and is different from the path that has the input piped to it.

[cymen]

I can come up with an example at some point but not right at this very moment. There should be some examples out there -- likely NODE_PATH will need to be set in the environment so that it has the base directory to resolve relative requires from.

[marcgreenstock]

Okay fascinating, you're right @cymen!

cat ./test.js | ./node_modules/.bin/browserify -t browserify-shim --fast -o result.js -

By using this command, jquery is loaded with 4.0 but not with 6.3. Do you know if this is logged as an issue on browserify?

[cymen]

@marcgreenstock I do not know -- I did open this issue: browserify/browserify#1019 but I think what you are running into is different.

This might be related: browserify/browserify#868