2

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?

davidpauljunior
  • 8,238
  • 6
  • 30
  • 54
  • By the way, you don't need to use the `browser` directive for either of those files because the path is set by the `main` directive in their respective `package.json` files. – YPCrumble Apr 22 '16 at 12:44
  • Yeah I knew I could require them direct from node_modules (via their own package files as you say). The reason I was using the shim for those was because I thought that exposed them to the global `window`. – davidpauljunior Apr 22 '16 at 14:56
  • 1
    The `browser` directive is just for providing an alias to override the file Browserify uses, see https://github.com/substack/node-browserify#browser-field, that's part of Browserify core. I think your method of using `window.Tether` is correct if you're looking to have `Tether` available to the rest of your app globally. Another option is to pull Tether via CDN if that's available and use the [`global`](https://github.com/thlorenz/browserify-shim#a-expose-global-variables-via-global) setting to pull from the existing `window` rather than re-incorporating the code in your bundle. – YPCrumble Apr 22 '16 at 14:59

1 Answers1

2

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.

YPCrumble
  • 26,610
  • 23
  • 107
  • 172
  • I find the docs really don't make it clear what they mean by `window`. That seems to be the cause of all problems. I suppose I wanted my requires from within modules to not show that they were attached to the window. This can probably be done in a config somewhere though. Thanks! – davidpauljunior Apr 22 '16 at 15:29
  • Yeah - just added an [issue](https://github.com/thlorenz/browserify-shim/issues/210) will look at improving the documentation for that part. – YPCrumble Apr 22 '16 at 15:36