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

[balteo]

1. OS:
   Mac OSX (El Capitan)
2. Versions:
   angular-cli: 1.0.0-beta.5
   node: 4.3.1
   os: darwin x64
3. Repro steps.
   I have installed less css
4. 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?

[patrykbialek]

I have the same problem, didn't fixed yet... but in my case if I have @import statement insisde the .less file the error occures.

Pat

[melquic]

Same problem here. Any news?

Melq

[balteo]

@melquic Not on my side unfortunately...

[watzon]

Also getting this error. Seems to happen anytime a component or vendor file is added or removed. Has to do with the ng build task not running correctly

[j6s]

+1 - also present on Linux based systems

[cvharris]

Same problem here. Has this just been a known issue? Has @import in LESS files worked yet on this build?

[j6s]

@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.

[cvharris]

That did work, thanks for the workaround @j6s. However, this exposed what I think is at the heart of the issue: that compilation errors from less.render() are not being bubbled out by the Broccoli build. I think that would be a nice enhancement to this build, to prevent such undefined errors.

At least, that was the source of the issue in my case.

[j6s]

I agree. We did spend about an hour debugging to come to a conclusion that we could have reached very easily, if the messages would be bubbled out

[gsaadeh]

I am having an issue importing less and css files with the (less) and (inline) keywords such as:

@import (inline) "test.css";

I've tried importing from the same directory and from the node_modules directory and I got the same error.

File: input (1)
The Broccoli Plugin: [LESSPlugin] failed with:
undefined

The broccoli plugin was instantiated at:
    at LESSPlugin.Plugin (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
    at LESSPlugin.CachingWriter [as constructor] (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
    at new LESSPlugin (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/lib/broccoli/angular-broccoli-less.js:21:12)
    at Object.Plugin.build.compile.exports.makeBroccoliTree (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/lib/broccoli/angular-broccoli-less.js:52:12)
    at Angular2App._buildTree (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/lib/broccoli/angular2-app.js:125:27)
    at new Angular2App (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/Users/George/Documents/Dev/ng2-kendoui/angular-cli-build.js:6:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/Users/George/Documents/Dev/ng2-kendoui/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/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/serve.js:15:19)
    at /Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/angular-cli/lib/commands/serve.js:64:24
    at lib$rsvp$$internal$$tryCatch (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

[stevefarwell]

any updates yet?

added "less":"^2.0.0" to devDependencies in package.json
did npm install

Still having error
The Broccoli Plugin: [LESSPlugin] failed with:
undefined

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

no luck

[ohanspace]

any update??

[nmorenor]

Hey,

I had this same issue, it turns out that the stacktrace is because one of the less files is referencing to a variable from a file that is not being imported by the file itself, on less you could have one file that do many imports so that you can split your css on different files. I think we could have the Angular2App to tell the lessCompiler plugin to exclude a set of files from inside our src/app dir. This change is adding that capability to the lessCompiler plugin, what do you think?

[minhnguyenwp]

Hi,

I had same. Pls help me use lessCompliler option !

[cvharris]

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 [email protected] 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
.

[nmorenor]

Right part of the issue is that the Stacktrace is not that helpful, but also the fact that some less files should not be compiled alone, they are only useful if they get imported from another file. The approach I was following was to set a less compiler property to disable the compile a certain path inside src/app, although if I follow this and modify these files brocoli does not detect a change in this excluded path. I see two issues.

• Expose a Less compiler on the console so you can get to know why the less files did not compile, as troubleshooting.
• Allow you to have a set excluded directories with less files inside the src dir that will not get compiled.

[nmorenor]

Hi,

I have closed the previous pull request and generated another one, this one will let you exclude files but at the same time, will let broccoli watch for changes inside this exclusion and trigger a build if any less file changes under the src directory. change. Although, It will also nice to have a way to dump a nice message when the less compiler throws an exception.

[balteo]

I am still struggling with this issue. The lack of explicitness of the error message is really making things difficult. What is the way of determining what's the real error message?

I tried to refer the entry point less file as follows:

lessCompiler: { 'paths': [__dirname + '/src/assets/styles/bootstrap.less'] }

Which gives me the same cryptic error message:

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-client/node_modules/angular-cli/node_modules/broccoli-plugin/index.js:10:31)
    at LESSPlugin.CachingWriter [as constructor] (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
    at new LESSPlugin (/Users/julien/Documents/projects/bignibou/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-client/node_modules/angular-cli/lib/broccoli/angular-broccoli-less.js:52:12)
    at Angular2App._buildTree (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/lib/broccoli/angular2-app.js:133:27)
    at new Angular2App (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/Users/julien/Documents/projects/bignibou/bignibou-client/angular-cli-build.js:10:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/julien/Documents/projects/bignibou/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-client/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/Users/julien/Documents/projects/bignibou/bignibou-client/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-client/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
    at /Users/julien/Documents/projects/bignibou/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-client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

Can anyone please tell me how to figure out what the real error message is?

For your information, I use the following versions:

angular-cli: 1.0.0-beta.9
node: 4.4.5
os: darwin x64

P.S. Using the lessc compiler like so lessc src/assets/styles/bootstrap.less hello.css properly generates a hello.css file.

[Dammmien]

I had the same error, I think this is only because LESS compiler errors aren't recovered by the Broccoli stacktrace. I had errors when using import statements so i guessed it was a path problem. So you have to defined the src folder in the lessCompiler property of your angular-cli-build.js file.

{
    ...
    lessCompiler: {
        'paths': [ __dirname + '/src' ]
    },
    ...
}

And then you have to make all your imports from this path :

@import "/path/to/my-file.less";

As LESS errors aren't recovered by the Broccoli stacktrace you don't know what is the problem, so maybe it's not the solution to your problem... but it worked for me.

[balteo]

Thanks for your message. Can you please tell me where your import:

import "/path/to/my-file.less";

is located? I am not sure where that is (within index.html for instance). I use SystemJS.

Thanks in advance.

[Dammmien]

The import statement is located in a LESS file to import another LESS file as mentionned in the LESS documentation : import directive feature.

The path of the import is relative to the path declared in the lessCompiler option.

[balteo]

I see. But how do you refer to the main bootstrap.less file from within your index.html?

[Dammmien]

Your boostrap.less file will be compiled into a boostrap.css file in the _dist_ folder of your project. You have just to follow the path from your index.html file to your boostrap.css file like you do to import a classic stylesheet in an html file.

[balteo]

As LESS errors aren't recovered by the Broccoli stacktrace you don't know what is the problem, so maybe it's not the solution to your problem... but it worked for me.

What you said abvove about the exception being hidden is interesting. Do you or someone else know of any way of having more insight into the underlying exception? I find it impossible to advance blindly. There must be a way of accessing the underlying exception through some debugging...

[db6edr]

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.

[zgosalvez]

For anyone else trying to use Bootstrap less files to compile, here's how I got it to work. Caveat is that this approach is hard-coded in the dependency. Thanks to @db6edr for pointing out how to display error messages. The error message I got was that Less was trying to compile my Less partials. This workaround forces angular-cli to only compile bootstrap.less.

1. Download Bootstrap Source Code
2. Move less directory into /src/css/less
3. Follow remaining steps below:

Add lessCompiler flag in angular-cli-build.js

//...
lessCompiler: {
    compress: true,
    paths: [ __dirname + '/src/css/less' ],
},
vendorNpmFiles: [
//...

Modify build() in angular-broccoli-less.js like so

build() {
    return Promise.all(this.listEntries().map(e => {

        if (path.basename(e.relativePath) != 'bootstrap.less') {
            return;
        }

        let fileName = path.resolve(e.basePath, e.relativePath);
        return this.compile(fileName, this.inputPaths[0], this.outputPath);
    }));
}

This is inspired by #1150 _fix(sass): don't compile partials_ pull request.

[balteo]

Using db6edr's modification of the compile function, I managed to get more insight into the error/stacktrace.

Here is the error message:

{ [Error: .border-right-radius is undefined]
  type: 'Name',
  filename: 'input',
  index: 31093,
  line: 1029,
  callLine: NaN,
  callExtract: undefined,
  column: 2,
  extract: 
   [ '.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {',
     '  .border-right-radius(0);',
     '}' ],
  message: '.border-right-radius is undefined',
  stack: undefined }

My IDE does warns me of this with the following message:

Element 'border-right-radius' is resolved only by name without using of explicit imports less... (⌘F1)
This inspection warns about less elements that are not imported explicitly and resolved through all project less-files only by name. You have no guaranties that these elements will be resolved at the production.

Now what puzzles me is that the following manual compilation using the this command line passes without problem:

lessc src/assets/styles/bootstrap.less dist/assets/styles/style.css

What could cause this inconsistency between lessc and broccoli?

[balteo]

I think I am getting why my use of broccoli-less fails. I need just one less file to be compiled and not all less files within the directory mentioned by path.

If I change the makeBroccoliTree within angular-broccoli-less.js from

exports.makeBroccoliTree = (sourceDir, options) => {
  if (less) {
    let lessSrcTree = new Funnel(sourceDir, {
      include: ['**/*.less'],
      allowEmpty: true
    });

    return new LESSPlugin([lessSrcTree], options);
  }
};

to this:

exports.makeBroccoliTree = (sourceDir, options) => {
  if (less) {
    let lessSrcTree = new Funnel(sourceDir, {
      include: ['**/bootstrap.less'],//Pointing to just the one file!
      allowEmpty: true
    });

    return new LESSPlugin([lessSrcTree], options);
  }
};

Then a bootstrap.css file is generated properly.

Now I can't obviously fiddle with the node_modules sources. How can I configure this properly?

[filipesilva]

Closed as this issue was made obsolete by https://github.com/angular/angular-cli/pull/1455.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}