Browserify can't resolve "./tree/n" modules

[pateketrueke]

I'm working on a project that requires LESS to be included using Browserify.

The main issue here is about how LESS is including its own modules internally.

['color',      'directive',  'operation',          'dimension',
 'keyword',    'variable',   'ruleset',            'element',
 'selector',   'quoted',     'expression',         'rule',
 'call',       'url',        'alpha',              'import',
 'mixin',      'comment',    'anonymous',          'value',
 'javascript', 'assignment', 'condition',          'paren',
 'media',      'unicode-descriptor', 'negative',   'extend'
].forEach(function (n) {
    require('./tree/' + n);
});

Actually Browserify won't understand any dynamic require-calls, so the results are frustrating at this point.

Switching that loop with its static-version shall produce nice results.

require('./tree/color');
require('./tree/directive');
require('./tree/operation');
require('./tree/dimension');
require('./tree/keyword');
require('./tree/variable');
require('./tree/ruleset');
require('./tree/element');
require('./tree/selector');
require('./tree/quoted');
require('./tree/expression');
require('./tree/rule');
require('./tree/call');
require('./tree/url');
require('./tree/alpha');
require('./tree/import');
require('./tree/mixin');
require('./tree/comment');
require('./tree/anonymous');
require('./tree/value');
require('./tree/javascript');
require('./tree/assignment');
require('./tree/condition');
require('./tree/paren');
require('./tree/media');
require('./tree/unicode-descriptor');
require('./tree/negative');
require('./tree/extend');

These require-calls are fully understandable by Browserify.

What do you think?

[lukeapage]

We want to switch to use browserify to create our browser release.. but..
there is custom code for the browser so at the moment I don't see how what
you are doing would work. Why not just include our single browser js file?

[pateketrueke]

I'm doing a self-contained application which should be isomorphic at some point, some APIs would run on the browser, NodeJS and JVM.

Actually using LESS for quick editing and preview on browser, and it should compile at server-side too, producing the same results.

Since all the related code is making require('less') calls the best solution for me (?) is browserifying LESS rather than including the single browser js file.

[lukeapage]

okay but this approach will only work if you don't have imports and don't use anything like the data-uri function...

regardless of whether it will work, I am happy making the change above and later refactoring it to be nicer. If you do a pull request I'll just merge it.

[pateketrueke]

BTW; i'm confident about import/data-uri issues, but actually i'm not using such features.

It's sure that making @import calls would be a MUST soon, think about something like this:

less = require('less')

less.imports['mixins'] = '''
.btcf() {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}
'''

Then, we can still using @import 'mixins'; and LESS internally would look-up for this import definition before asking the filesystem or XHR.

Lets imagine that you exports any LESS file this way, now you're able to compile in a self-contained manner.

[lukeapage]

thanks merged

[StreetStrider]

Good day.
It seemes, that I'm experiencing issues with less + browserify as well.
Firstly I've tried on 1.6.1 and now I checkout master, so I can be sure that all fixes was used.
Error is so:

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error: ENOENT, open 'tls' while resolving "tls" from file <project>/node_modules/less/node_modules/request/node_modules/forever-agent/index.js
    at <project>/node_modules/browserify/node_modules/module-deps/index.js:152:29
    at fs.js:207:20
    at Object.oncomplete (fs.js:107:15)

I presume that is because browserify obviously doesn't have browser-shim for tls. But I do not need it at all (and I think less don't need it for compiling too).

[pateketrueke]

Having a script (inside the less-repo) like this:

var less = require('./lib/less'),
    parser = new less.Parser,
    output;

parser.parse('body{color:red}', function(e, tree) {
  output = tree.toCSS();
});

console.log(output);

I fixed that ignoring some modules:

browserify -e main.js -o bundle.js -i fs -i url -i path -i mime -i events -i request -i clean-css -i source-map --no-detect-globals

Executing both scripts will produce the same results:

node main.js
node bundle.js

[matthew-dean]

@lukeapage Would #1732 address this? If less core was not Node-specific, I would assume it wouldn't conflict with a Browserify environment.

[StreetStrider]

@pateketrueke, thanks for the tip. I've ignored tls and less loaded successfully.

[lukeapage]

@matthew-dean yes it would address it - I would like to use browserify to generate a concatted environment agnostic single file