Browserifying libraries that were themselves browserified: relative paths error

Question

I want to use a library that was build using browserify. The library built correctly and works fine when it is used by itself.

Now that built library is in my vendors/ directory, and I try to require it in my new application:

var myLib = require('./vendors/myLib');

When I try to browserify my application, it complains that it can't find some of the internal require statements inside that library:

Error: Cannot find module '../utils/logger' from '/myApp/vendor'

Browserify seems to be trying to re-build the lib from the wrong directory. How can I fix this?

---

More specifics:

The lib looks like this:

myLib
 │  app.js
 │
 ├──models
 │    model.js
 │
 ├──utils
      logger.js

app requires model, and model requires logger using require('../utils/logger').

This is then build into myLib.js (browserify app.js --standalone myLib > myLib.js).

So far, so good, myLib works fine.

In my new application, I put myLib.js in the /vendor directory, require it as listed at top, and get the error that Browserify can't find '../utils/logger'.

In this situation I do control myLib, so could change it if absolutely necessary, but it's another project in the company and I'd prefer not to if necessary. However, I see at least one other question on SO where someone is clearly having the same problem with a bower-installed third-party library.

Answer 1

This seems to be pretty borked.

Here are a few options:

• Run derequire on myLib before consuming.

• Try browserifying your app like so:

  browserify({
    entries: ['./entry'],
    noParse: ['/abs/path/to/vendors/myLib.js'],
  })
  

  If it doesn't work, try it without the extension in the noParse value.

• Minify myLib before consuming it.

Answer 2

aaaah, i finally got it working. using the standalone option of browserify along with gulp-derequire did the trick! yay!