Browserify does not recognize a module bundled by Browserify.

[martinhbramwell]

I have been trying to see how to package up third-party modules in a bundle separate from my own bundle, but cannot understand why it will not work.

I have published an example here : brfy-issue-example

To try it out :

 git clone git@github.com:FleetingClouds/brfy-issue-example.git
 cd brfy-issue-example
 npm run brfy

To clean back to original state

 npm run clean-all

To see the problem, open the file public/index.html in a browser, and check the console.

Also look at the generated files: public/boop.js, public/beep.js and public/common.js.

Last line of public/boop.js which fails:

 :
 :
 },{"./robot.js":"/robot.js","uniq":"uniq"}]},{},[1]);

Last line of public/beep.js which succeeds:

 :
 :
 },{"./robot.js":"/robot.js"}]},{},[1]);

Last lines of public/common.js:

 :
 :
 },{}],"/robot.js":[function(require,module,exports){
 var uniq = require('uniq');
 module.exports = function wobot (s) { return uniq(s) };
 //
 },{"uniq":1}]},{},[]);

Commands invoked :

 browserify -r ./robot.js > public/common.js
 browserify -x ./robot.js -x uniq beep.js > public/beep.js
 browserify -x ./robot.js -x uniq boop.js > public/boop.js

I tried directly editing public/boop.js and public/common.js using differnt combination of ./uniq, "./uniq":"/uniq" etc. None of them helped boop find uniq

I also tried a hint from the post Why is browserify pulling in a lib 2 times? - Browserify

Instead of ...

browserify -x ./robot.js -x uniq boop.js > public/boop.js

... I tried ...

browserify -x ./robot.js -x public/common.js boop.js > public/boop.js

... but it just bundles uniq into public/boop.js. I might as well stick with a single bundle.

I'd really appreciate to know if this is a bug or my poor understanding.

What's the correct way to do what I am trying to do?

I thought this was a duplicate of the issue Multiple bundles example does not work, but either the solution does not work, or I am doing it wrong.

Possibly, this is a duplicate of External and Require Bundling Resulting in Undefined for JQuery/Angular, but I don't know gulp, so I cannot be sure.

[martinhbramwell]

Btw I am trying with 7.0.2. It also fails.

[nkoterba]

@martinhbramwell Good to know I'm not the only one struggling with this...I see you referenced #1014. I am using Gulp to help streamline the bundling process, but in essence we are trying to do the same thing: create separate bundles that can reference/"see" each other. In your example above, I see you're following the beep/boop/robot example from the Browserify readme.

I just upgraded to Browserify 8.x and am hoping maybe these issues are fixed. Having only a single large bundle negates the functionality of using any type of "watch" and live-reload system b/c the single bundle takes so long to compile.

[martinhbramwell]

@nkoterba It is two weeks since I posted that and still no response. I'm working on other things in the meantime, but I must say I am amazed. I posted the same question in Stack Overflow. No answers. No comments. Not even an up vote. To read the blogosphere you'd think Browserify was a major deal, but to me it is seeming more and more like a dead project. (superceded by WebPack?)

[feross]

@nkoterba If you use watchify, you get automatic incremental bundle recompiling which takes <1 sec. I just use a single bundle on all my sites.

@martinhbramwell Not a dead project, but completely run by volunteers who sometimes get busy. I fixed your code and sent you a PR: https://github.com/FleetingClouds/brfy-issue-example/pull/1

Using -x and -r to factor your bundles is only advisable for small examples. Try using factor-bundle to do it automatically.

[martinhbramwell]

@feross Thank you very, very much for helping with that. I can't study your changes for a few days yet. I do wonder how I could have known how to do what you did just from reading the documentation.

(Hey . Did you know that in Spanish your name means 'ferocious'?)

[nkoterba]

@feross How big are your sites? A single bundle would be cool but we're pulling in several very large JS libraries: angular, jquery, d3, etc. and I can't have my "watch" task taking seconds to build. Thanks for the comments.

[feross]

Largest site is https://www.apstudynotes.org/ and has a 220KB JS file. Only large library is jquery. The build is snappy.

For monolithic libraries like angular, jquery, and d3, it might make more sense to just include them in separate <script> tags on the page. They rarely change and parsing their AST every time you change a line is wasteful (though watchify should be smart about this).

[saschagehlich]

@feross I'm facing the same issue using watchify, it seems that browserify breaks external dependencies after the first build: https://github.com/saschagehlich/watchify-test

[mattdesl]

Regarding size, I'm working on a cocoonJS app that is 12 mb after final bundle (4.2mb compressed) :scream: Our watchify time is about 1 second. The large tools (Pixi, ThreeJS, etc) are bundled separately and included as <script> tags, then required with browserify-shim.

[kand]

I believe I have a similar problem, exemplified here: https://github.com/kand/browserify-bundling-tests

I can't figure out how to get already bundled files included via name (not by file path).

Has anyone made any progress here?