basedir not resolving in dependencies

[eightyfive]

Correct me if I'm wrong, but setting basedir, I expect to be able to require relatively to this folder, inside the dependencies.

I have a very simple example that I cannot make work, given the following file structure:

js/app.js
js/src/models/Person.js
js/src/views/PersonView.js

(Note: app.js requires PersonView.js)

I would expect to be able to require Person.js from within PersonView.js like so:

var Person = require('./src/models/Person');

Instead of the normal method, relatively to process.cwd():

var Person = require('../models/Person');

But running bundle...

var b = browserify('./app', {basedir: './js'});
b.bundle().pipe(process.stdout);

... I get the following error:

Error: module "./src/models/Person" not found from "/Users/..some path.../js/src/views/PersonView.js"

Any hint/help would be much appreciated.

[bstst]

Try using a for-some-reason-undocumented 'paths' option (an array of strings) instead, it works for me perfectly:

var b = browserify('./app', {paths: ['./js']});

[eightyfive]

@bstst You made my day! @substack How come this is not documented? Can we rely on it?

[eightyfive]

Be careful, it looks like it is messing up things when used in conjunction with browserify-shim transform.

TLDR
Don't use the undocumented paths option together with browserify-shim.

Problem 1: browserify-shim does not shim a library that is located inside paths

Given this paths option:

'paths': ['./js']

And the following file structure:

js/entry.js
js/src/models/foo.js
js/src/models/foo2.js
js/vendor/my/bar.js

package.json:

  "browserify": {
    "transform": [ "browserify-shim" ]
  },
  "browser": {
    "bar": "./js/vendor/my/bar.js"
  },
  "browserify-shim": {
    "bar": "Bar",
  },

js/src/models/foo.js:

var Bar = require('bar'),
      Foo2 = require('src/models/foo2');
...

build.js:

browserify({basedir: './js', 'paths': ['./js']})
    .require('./entry')
    .bundle(function (err, src) {
        var f = new File('bundle.js')
        f.contents = src;
        // etc...
    });

In bundle.js, Bar appears as a dependency, but is not shimmed.

Strangely enough, if you require('bar') in the top-level file (entry.js), it is included as a dependency and shimmed properly...

Problem 2: "deep" path messes up with module dependency requirements

Considering the same file structure as above, but with the following paths option:

browserify({basedir: './js', 'paths': ['./js/src']})

And also shimming underscore:

  "browser": {
    "underscore": "./bower_components/underscore/underscore.js",
    "bar": "./js/vendor/my/bar.js"
  },
  "browserify-shim": {
    "underscore": "_",
    "bar": "Bar",
  },

js/src/models/foo.js:

var Bar = require('bar'),
      // ¡¡ Path to foo2.js is now relative to 'js/src/'
      Foo2 = require('models/foo2'),
      _ = require('underscore');
...

When trying to run the build.js throw the following error:

Error: module "underscore" not found from "js/src/models/foo.js"

Conclusion
Not a consistent behavior, I wouldn't use this option unless its purpose is well documented.

[bstst]

It works for me because I'm not using browserify-shim, which I never liked ideologically -- I prefer to rely on separately bundled globally available lib assets to avoid doing _ = require('underscore') and Backbone = require('backbone') etc in every module of my code.

Ignoring that -- I am looking into fixing browserify's path issues, as there are quite a lot of them in the code.

[eightyfive]

The paths option is documented in browser-resolve. That makes sense.