Shims break with browserify noParse option

[JonET]

I'd like to be able to speed up my browserify processing time by using noParse on large shimmed dependencies. Unfortunately the shim itself depends on global which doesn't get added to the file unless it's parsed. causing the error...

Uncaught ReferenceError: global is not defined

I found another example of this issue here .

[thlorenz]

Seems to me like this is a browserify issue. Could we please verify that this is intended?

If it is browserify-shim could fall back to window, i.e.: global = global || window

[JonET]

I don't think this is a browserify issue. It's doing the correct thing and not adding node globals when I ask it not to parse shimmed files. It should be possible to re-write the shim to not depend on global.

What browserify will do when processing shimmed files is insert a statement like var global=self; right before the shimmed code. Maybe using self instead of global is the correct answer?

[JonET]

Or maybe to be safe insert a var __shim_global=self; before the shim starts and use that. Libraries might overwrite self.

[thlorenz]

Happened to look through grunt-browserify and found that it actually adds the var global = self.

Is that the cause of your issue? If yes, please file it there.

Also with v3 of browserify-shim you can simply config everything in the package.json and most likely no longer need to do it through that grunt tool.

[johnkpaul]

I think that this was fixed with an unrelated change sometime in the past few months. I don't use grunt-browserify, but I no longer have this problem and have successfully added back everything to noParse. I don't remember exactly when that happened, but it definitely works for me now.

[bclinkinbeard]

This is still an issue, as demonstrated by this zip. Download it, run npm i, then npm run bundleNoParse, and open index.html. You will see the "global is not defined" error in the console. If you do npm run bundle, you do not get the error. http://cl.ly/3c1E3P2U273U

[thlorenz]

@bclinkinbeard thanks for tracking this down.

Ccould you please put this zip up in a repo, so we can look and comment on the code? Also what is the suggested fix if global is not present? Should we use window instead?

I'm confused why global is not present in one case but is in another - isn't that an inconsistency in browserify and should be solved there?

[bclinkinbeard]

Pushed to https://github.com/bclinkinbeard/noParse-bug-demo

I honestly don't know enough about Browserify's internals to know what the proper fix or root cause is. It may very well be a Browserify issue. The bundle.js that is committed is the problematic version from npm run bundleNoParse. Note I even added the --ig flag, which is supposed to insert the globals no matter what, and it doesn't help.

/cc @substack

[thlorenz]

Thanks I will have a look, maybe I can implement a workaround for now (as mentioned above) although I'm pretty sure that --noparse or not, global should be present in either both or none.

[thlorenz]

Are there any news on this issue (has anyone filed an issue with browserify)? Or should I accept the fact that we need to add a workaround here?

[bclinkinbeard]

I just discovered that defining the shims with the "angular": "global:angular" syntax avoids the error. Does that tell us anything?

[thlorenz]

@bclinkinbeard unfortunately not much, I'll have a look when I get a chance.

Could you check though if this possibly got fixed with the latest browserify version?

Thanks.

[bclinkinbeard]

Still happening with b-shim 3.5.0 and Browserify 4.1.6

[thlorenz]

@bclinkinbeard thanks. Will have a closer look then when I'm back from jsconf.

[knownasilya]

@thlorenz has there been any movement on this?

[knownasilya]

Here's a repo to recreate the issues: https://github.com/knownasilya/ember-browserify-test

cc @bclinkinbeard

[AndrewKovalenko]

I have the same issue. In my app I use twitter bootstrap, which is dependent from jQuery, so I added shims for this two libs

"browser": {
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js",
    "jquery": "./node_modules/jquery/dist/jquery.js"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery": "jQuery",
    "bootstrap": { "depends": ["jquery:jQuery"], "exports": null }
  }

when I add jquery and bootstrap to noparse list, browserify-shims transforms code and adds ; jQuery = global.jQuery = require("<...project path...>/node_modules/jquery/dist/jquery.js"); before bootstrap code. But because window.global doesn't exist, I get Uncaught ReferenceError: global is not defined.

However, if I don't use noparse, browserify-shims wraps ; jQuery = global.jQuery = require("<...project path...>/node_modules/jquery/dist/jquery.js");+ bootstrap code into self-called function and passes global as parameter there, so everything is working fine.

[outring]

Same thing here :+1:

[darky]

:+1: It's high priority issue for many UMD-like modules