[SOLVED] Browserify shim doesn't seem to attach Tether to window object

Browserify shim doesn't seem to attach Tether to window object

I have the following in my package.json file:

"browserify": {
  "transform": [
    "browserify-shim"
  ]
},
"browser": {
  "jquery": "./node_modules/jquery/dist/jquery.js",
  "tether": "./node_modules/tether/dist/tether.js"
},
"browserify-shim": {
  "jquery": "$",
  "tether": "Tether"
}

And then this in one of my JS modules:

const $ = require('jquery');
const Tether = require('tether');

I then get the following error in the browser:

tether.min.js:1 Uncaught TypeError: Cannot set property 'Tether' of undefined

However, if I don't try to shim Tether and just use window.Tether in the module that requires it, it works fine.

const $ = require('jquery');
window.Tether = require('tether');

Does anyone know why the browserify-shim wouldn't work for Tether in this way?

Solution

You're correct - you need to manually specify the window object from your bundle.

I'm not 100% sure, but my understanding is that this part of the documentation, when it says

x exports window.$

actually means that $ is available to all modules within the bundle as $ - this does not mean the window object of your webapp.

See for instance this issue.

The problem is in that section of the documentation where it seems people believe the object should be part of the window - might be a good idea to change the wording of that.