angular-cli: The Broccoli Plugin: [LESSPlugin] failed with: undefined

OS: Mac OSX (El Capitan)
Versions: angular-cli: 1.0.0-beta.5 node: 4.3.1 os: darwin x64
Repro steps. I have installed less css
The log given by the failure:

Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Build failed.
File: input (1029)
The Broccoli Plugin: [LESSPlugin] failed with:
undefined

The broccoli plugin was instantiated at: 
    at LESSPlugin.Plugin (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
    at LESSPlugin.CachingWriter [as constructor] (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
    at new LESSPlugin (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/lib/broccoli/angular-broccoli-less.js:21:12)
    at Object.Plugin.build.compile.exports.makeBroccoliTree (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/lib/broccoli/angular-broccoli-less.js:52:12)
    at Angular2App._buildTree (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/lib/broccoli/angular2-app.js:125:27)
    at new Angular2App (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/angular-cli-build.js:6:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
    at /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24
    at lib$rsvp$$internal$$tryCatch (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

I am trying to get less css to work with my angular CLI- generated application.

I have tried and configure the plugin as follows in angular-cli-build.js

module.exports = function (defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)'
    ],
    lessCompiler: {
      includePaths: [
        'src/assets/styles'
      ]
    }
  });
};

Can anyone please help?

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 5
Comments: 30 (1 by maintainers)

Most upvoted comments

I know this is not a proper solution to get less’ error message - it is rather a quick and dirty hack dumping the entire error object from less to console:

Edit node_modules/angular-cli/lib/broccoli/angular-broccoli-less.js and make the function compile(…) look like this:

compile(fileName, inputPath, outputPath) {
    let content = fs.readFileSync(fileName, 'utf8');

    return less.render(content, this.options)
      .then(output => {
        let filePath = fileName.replace(inputPath, outputPath).replace(/\.less$/, '.css');
        fse.outputFileSync(filePath, output.css, 'utf8');
      }, error => {
        console.log(error);
        return Promise.reject( error );
      });
}

In my case, it revealed that one of the input files contained invalid CSS / less code.

db6edr on Jul 21, 2016

Is this error only because LESS compile errors aren’t being bubbled out to the Broccoli stacktrace? Maybe thats the real issue here and we should seek an enhancement to expose it for swifter troubleshooting On Wed, Jul 6, 2016 at 05:44 Minh Nguyen notifications@github.com wrote:

Hi,

I had same. Pls help me use lessCompliler option !

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/angular/angular-cli/issues/873#issuecomment-230738941, or mute the thread https://github.com/notifications/unsubscribe/AD0_QOVFYLq-cQgPZUWpf9GDRBp1ij0Rks5qS4btgaJpZM4IjkkS .

cvharris on Jul 6, 2016

@cvharris as mentioned before, it works, if you move the imported less files out of the src/ folder and add the following to your angular-cli-build.js:

  return new Angular2App(defaults, {
    vendorNpmFiles: [
        // ...
    ],
    lessCompiler: {
      'paths': [__dirname + '/less'] // this is the important configuration
    }
  });

But this really is only a workaround for the currently existing problem.

j6s on May 29, 2016